<?php
/**
 * Plugin Name: Ethnic eCommerce Development Service Page
 * Description: Creates and renders the eCommerce Development Services pillar page.
 * Version: 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_parent_id' ) ) {
	function ethnic_ecommerce_development_page_parent_id() {
		static $parent_id = null;

		if ( null !== $parent_id ) {
			return $parent_id;
		}

		$page = get_page_by_path( 'services' );

		if ( $page instanceof WP_Post ) {
			$parent_id = (int) $page->ID;
		} else {
			$fallback  = get_post( 843 );
			$parent_id = $fallback instanceof WP_Post ? (int) $fallback->ID : 0;
		}

		return $parent_id;
	}
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_get_target_page' ) ) {
	function ethnic_ecommerce_development_page_get_target_page() {
		static $page = false;

		if ( false !== $page ) {
			return $page instanceof WP_Post ? $page : null;
		}

		$page = get_page_by_path( 'services/ecommerce-development' );

		if ( ! ( $page instanceof WP_Post ) ) {
			$fallback = get_page_by_path( 'ecommerce-development' );

			if ( $fallback instanceof WP_Post && (int) $fallback->post_parent === ethnic_ecommerce_development_page_parent_id() ) {
				$page = $fallback;
			}
		}

		return $page instanceof WP_Post ? $page : null;
	}
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_ensure_page' ) ) {
	function ethnic_ecommerce_development_page_ensure_page() {
		static $did_run = false;

		if ( $did_run ) {
			return;
		}

		$did_run   = true;
		$parent_id = ethnic_ecommerce_development_page_parent_id();

		if ( ! $parent_id ) {
			return;
		}

		$postarr = array(
			'post_type'      => 'page',
			'post_title'     => 'eCommerce Development Services',
			'post_name'      => 'ecommerce-development',
			'post_parent'    => $parent_id,
			'post_status'    => 'publish',
			'post_content'   => '',
			'comment_status' => 'closed',
			'ping_status'    => 'closed',
		);

		$page = get_page_by_path( 'services/ecommerce-development' );

		if ( $page instanceof WP_Post ) {
			$needs_update = 'eCommerce Development Services' !== $page->post_title
				|| (int) $page->post_parent !== $parent_id
				|| 'publish' !== $page->post_status;

			if ( $needs_update ) {
				wp_update_post(
					array_merge(
						$postarr,
						array(
							'ID' => (int) $page->ID,
						)
					)
				);
				clean_post_cache( (int) $page->ID );
			}

			return;
		}

		$fallback = get_page_by_path( 'ecommerce-development' );

		if ( $fallback instanceof WP_Post ) {
			wp_update_post(
				array_merge(
					$postarr,
					array(
						'ID' => (int) $fallback->ID,
					)
				)
			);
			clean_post_cache( (int) $fallback->ID );
			return;
		}

		wp_insert_post( $postarr );
	}

	add_action( 'init', 'ethnic_ecommerce_development_page_ensure_page', 5 );
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_is_target' ) ) {
	function ethnic_ecommerce_development_page_is_target() {
		if ( is_admin() ) {
			return false;
		}

		$page = ethnic_ecommerce_development_page_get_target_page();

		if ( ! ( $page instanceof WP_Post ) ) {
			return false;
		}

		return (int) get_queried_object_id() === (int) $page->ID || is_page( (int) $page->ID );
	}
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_url' ) ) {
	function ethnic_ecommerce_development_page_url( $path ) {
		return home_url( '/' . ltrim( (string) $path, '/' ) . '/' );
	}
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_contact_url' ) ) {
	function ethnic_ecommerce_development_page_contact_url( $args = array() ) {
		return ethnic_consultation_route_contact_url( $args, ethnic_ecommerce_development_page_url( 'contact-us' ) );
	}
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_case_studies_url' ) ) {
	function ethnic_ecommerce_development_page_case_studies_url() {
		return function_exists( 'ethnic_case_studies_archive_url' ) ? ethnic_case_studies_archive_url() : ethnic_ecommerce_development_page_url( 'case-studies' );
	}
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_platform_url' ) ) {
	function ethnic_ecommerce_development_page_platform_url( $slug ) {
		$slug       = trim( (string) $slug, '/' );
		$candidates = array(
			'services/ecommerce-development/' . $slug,
			'ecommerce-development/' . $slug,
			$slug,
		);

		foreach ( $candidates as $candidate ) {
			$page = get_page_by_path( $candidate );

			if ( $page instanceof WP_Post && 'publish' === get_post_status( $page ) ) {
				return get_permalink( $page );
			}
		}

		return ethnic_ecommerce_development_page_contact_url(
			array(
				'intent'   => 'platform',
				'service'  => 'ecommerce-development',
				'platform' => $slug,
			)
		);
	}
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_data' ) ) {
	function ethnic_ecommerce_development_page_data() {
		static $data = null;

		if ( null !== $data ) {
			return $data;
		}

		$data = array(
			'metaTitle'       => 'eCommerce Development Services | Custom eCommerce Development Company',
			'metaDescription' => 'Looking for an eCommerce development company? We provide custom eCommerce development services, platform builds, integrations, performance optimization, and long-term support for growing brands and enterprises.',
			'heroTitle'       => 'eCommerce Development Services',
			'heroText'        => 'We build scalable, conversion-focused, and integration-ready commerce experiences for brands that need stronger storefronts, smoother checkout journeys, and better connected operations.',
			'heroPoints'      => array(
				'Custom eCommerce solutions',
				'B2B, B2C, and D2C commerce expertise',
				'Platform builds, integrations, and long-term support',
			),
			'overviewParagraphs' => array(
				'Our custom eCommerce development services are designed for growing brands, merchants, wholesalers, and enterprises that need more than a basic storefront. We help shape commerce experiences around business goals, operational workflows, and the buying journeys that actually influence revenue.',
				'That includes storefront UX, checkout flows, backend process support, and the systems that keep catalog, order, inventory, customer, and fulfillment operations moving together. Whether the need is a new build, a replatforming initiative, or a targeted modernization effort, we create commerce foundations that support day-to-day execution and long-term growth.',
				'As an eCommerce development company, we focus on performance, scalability, usability, integrations, and measurable business outcomes. Strategy, implementation, optimization, and growth support all stay connected so the platform can evolve with the business rather than becoming a bottleneck later.',
			),
			'overviewFeatures' => array(
				array(
					'icon'  => 'bag',
					'title' => 'Custom Commerce Solutions',
					'copy'  => 'Commerce experiences aligned to your business model, catalog structure, checkout needs, and operational requirements.',
				),
				array(
					'icon'  => 'layers',
					'title' => 'Scalable Architecture',
					'copy'  => 'Platform decisions shaped around growth, integrations, traffic demands, and maintainability over time.',
				),
				array(
					'icon'  => 'spark',
					'title' => 'Conversion-Focused UX',
					'copy'  => 'Storefront and checkout journeys designed to reduce friction and support stronger merchandising performance.',
				),
				array(
					'icon'  => 'growth',
					'title' => 'Long-Term Growth Support',
					'copy'  => 'Launch is treated as the start of optimization, iteration, and commercial improvement rather than the end.',
				),
			),
			'platformIntro' => 'The right platform depends on business model, scale, catalog complexity, integrations, flexibility requirements, internal workflows, and long-term growth plans. We help businesses choose, build, modernize, and extend the commerce stack that best fits how they sell.',
			'platforms'     => array(
				array(
					'badge'       => 'AC',
					'icon'        => 'grid',
					'title'       => 'Adobe Commerce / Magento',
					'description' => 'Enterprise-ready commerce delivery for complex catalogs, multi-store operations, custom pricing models, and integration-heavy environments.',
					'slug'        => 'adobe-commerce-development',
				),
				array(
					'badge'       => 'SH',
					'icon'        => 'bag',
					'title'       => 'Shopify',
					'description' => 'Strong fit for fast-moving brands that need cleaner storefront experiences, app integrations, and scalable commerce operations.',
					'slug'        => 'shopify-development',
				),
				array(
					'badge'       => 'WC',
					'icon'        => 'store',
					'title'       => 'WooCommerce',
					'description' => 'Flexible commerce builds for WordPress-based businesses that need customization, content control, and connected ecommerce growth.',
					'slug'        => 'woocommerce-development',
				),
				array(
					'badge'       => 'CC',
					'icon'        => 'spark',
					'title'       => 'Custom Commerce Solutions',
					'description' => 'Tailored commerce experiences when standard platforms do not fully support product rules, workflows, or user journeys.',
					'slug'        => 'custom-commerce-solutions',
				),
				array(
					'badge'       => 'HD',
					'icon'        => 'layers',
					'title'       => 'Headless Commerce',
					'description' => 'Decoupled storefront and backend architecture for businesses that need speed, flexibility, and experience-led differentiation.',
					'slug'        => 'headless-commerce-development',
				),
				array(
					'badge'       => 'MV',
					'icon'        => 'globe',
					'title'       => 'Marketplace / Multi-vendor Commerce',
					'description' => 'Commerce ecosystems built around multiple sellers, catalog feeds, operator controls, and more complex buyer-seller workflows.',
					'slug'        => 'marketplace-multi-vendor-commerce',
				),
			),
			'models' => array(
				array(
					'icon'        => 'briefcase',
					'title'       => 'B2B Commerce',
					'description' => 'B2B commerce solutions built around buying teams, pricing complexity, operational visibility, and connected business systems.',
					'highlights'  => array(
						'Account-based pricing and customer-specific catalogs',
						'Quote workflows, approval paths, and sales rep support',
						'Bulk ordering, repeat ordering, and negotiated terms',
						'ERP-connected operations and order visibility',
					),
				),
				array(
					'icon'        => 'cart',
					'title'       => 'B2C Commerce',
					'description' => 'B2C storefronts designed for discoverability, usability, mobile conversion, and merchandising performance.',
					'highlights'  => array(
						'User-friendly shopping journeys and navigation',
						'Promotions, merchandising, and campaign support',
						'Optimized checkout experiences and mobile-first UX',
						'Retention-focused customer experience improvements',
					),
				),
				array(
					'icon'        => 'bolt',
					'title'       => 'D2C Commerce',
					'description' => 'Direct-to-consumer commerce experiences built for stronger brand control, repeat purchase flows, and growth-focused optimization.',
					'highlights'  => array(
						'Brand-owned digital experiences and faster experimentation',
						'Subscription, replenishment, or repeat purchase support',
						'Engagement, loyalty, and customer lifecycle improvements',
						'Direct conversion optimization and growth operations',
					),
				),
			),
			'integrationsIntro' => 'Commerce platforms rarely operate alone. Integrations with business-critical tools improve automation, operational efficiency, visibility, and customer experience across the full order lifecycle. We build and support connected workflows based on how the business actually runs.',
			'integrations'      => array(
				array(
					'icon'  => 'plug',
					'title' => 'ERP Integration',
					'copy'  => 'Connect orders, inventory, pricing, fulfillment, and finance workflows with the systems that run day-to-day operations.',
				),
				array(
					'icon'  => 'users',
					'title' => 'CRM Integration',
					'copy'  => 'Support stronger customer visibility, account management, segmentation, and sales-aligned commerce workflows.',
				),
				array(
					'icon'  => 'grid',
					'title' => 'PIM Integration',
					'copy'  => 'Centralize product information, catalog updates, merchandising detail, and content consistency across storefronts.',
				),
				array(
					'icon'  => 'card',
					'title' => 'Payment Gateway Integration',
					'copy'  => 'Build dependable payment experiences that support customer confidence, checkout performance, and business requirements.',
				),
				array(
					'icon'  => 'truck',
					'title' => 'Shipping & Fulfillment Integration',
					'copy'  => 'Improve shipping logic, fulfillment visibility, rate handling, and post-purchase customer communication.',
				),
				array(
					'icon'  => 'chart',
					'title' => 'Marketing & Analytics Tools',
					'copy'  => 'Connect attribution, customer behavior, campaigns, reporting, and optimization workflows with the storefront.',
				),
				array(
					'icon'  => 'globe',
					'title' => 'Marketplace / Channel Sync',
					'copy'  => 'Support multi-channel selling with better catalog, stock, order, and pricing synchronization across sales channels.',
				),
				array(
					'icon'  => 'api',
					'title' => 'Custom API Integrations',
					'copy'  => 'Create tailored integrations when off-the-shelf connectors do not match business logic, systems, or workflows.',
				),
			),
			'performanceParagraphs' => array(
				'Performance and conversion are not treated as post-launch fixes. We build commerce experiences with speed, usability, structure, and scalability in mind from the beginning so browsing, product discovery, cart, and checkout all work with less friction.',
				'That means refining customer journeys, supporting mobile shopping behavior, tuning performance bottlenecks, and shaping the architecture around catalog growth, traffic demands, and operational complexity.',
			),
			'performanceChecklist' => array(
				'Site speed optimization',
				'Mobile experience improvements',
				'Checkout experience refinement',
				'Conversion-focused UX',
				'Scalable storefront architecture',
				'Merchandising and funnel support',
			),
			'performanceCards' => array(
				array(
					'label' => 'Storefront',
					'value' => 'Fast',
					'copy'  => 'Faster page rendering, cleaner asset loading, and more responsive shopping flows.',
				),
				array(
					'label' => 'Checkout',
					'value' => 'Focused',
					'copy'  => 'Reduced friction across cart, address, shipping, payment, and confirmation steps.',
				),
				array(
					'label' => 'Architecture',
					'value' => 'Scalable',
					'copy'  => 'Built to support growing catalogs, campaigns, integrations, and operational demand.',
				),
			),
			'supportCards' => array(
				array(
					'label'      => 'Ongoing Maintenance',
					'icon'       => 'shield',
					'title'      => 'Maintenance and stability support after launch',
					'description'=> 'Keep the store reliable, secure, and operational with structured maintenance and issue resolution.',
					'items'      => array(
						'Bug fixes and issue resolution',
						'Security and version updates',
						'Technical monitoring and release support',
					),
				),
				array(
					'label'      => 'Growth Enhancements',
					'icon'       => 'growth',
					'title'      => 'Enhancement work for conversion and platform growth',
					'description'=> 'Improve customer experience, merchandising, and performance through iterative enhancements.',
					'items'      => array(
						'Feature updates and UX improvements',
						'Performance and conversion tuning',
						'Checkout, merchandising, and storefront optimization',
					),
				),
				array(
					'label'      => 'Strategic Support',
					'icon'       => 'compass',
					'title'      => 'Long-term commerce partnership and roadmap support',
					'description'=> 'Support evolving operations, integrations, and growth priorities as the business scales.',
					'items'      => array(
						'Roadmap execution and prioritized delivery',
						'Integration evolution and system support',
						'Long-term technical partnership for scaling teams',
					),
				),
			),
			'caseStudies' => array(
				array(
					'title'    => 'Adobe Commerce Replatforming for a Multi-Store Retail Group',
					'platform' => 'Adobe Commerce',
					'industry' => 'Retail',
					'service'  => 'Replatforming',
					'challenge'=> 'A fragmented legacy setup slowed merchandising, limited visibility, and made it harder to scale promotions across stores.',
					'solution' => 'We rebuilt the commerce foundation with cleaner catalog structure, stronger integrations, and a more conversion-ready storefront experience.',
					'outcome'  => 'The business gained a more manageable commerce platform and a stronger base for growth, operations, and future optimization.',
				),
				array(
					'title'    => 'Shopify Growth Store Build for a D2C Brand',
					'platform' => 'Shopify',
					'industry' => 'Beauty',
					'service'  => 'Store Build',
					'challenge'=> 'The brand needed a faster launch path with clearer storytelling, stronger product pages, and better campaign readiness.',
					'solution' => 'We created a conversion-focused Shopify storefront with improved merchandising structure, mobile UX, and operational flexibility.',
					'outcome'  => 'The new store gave the team a cleaner launch foundation for campaigns, repeat purchases, and ongoing growth work.',
				),
				array(
					'title'    => 'B2B Commerce Portal for an Industrial Supplier',
					'platform' => 'Custom Commerce',
					'industry' => 'Manufacturing',
					'service'  => 'B2B Portal',
					'challenge'=> 'Sales workflows depended on manual coordination, account-specific pricing, and disconnected ordering processes.',
					'solution' => 'We designed a B2B commerce portal with role-based access, quote flows, customer-specific catalogs, and connected operational logic.',
					'outcome'  => 'The supplier gained stronger process clarity, better customer self-service, and a scalable commerce model for ongoing expansion.',
				),
			),
			'faqs' => array(
				array(
					'question' => 'What eCommerce development services do you offer?',
					'answer'   => 'We provide custom eCommerce development services covering strategy, storefront design, platform builds, checkout development, backend workflows, integrations, optimization, replatforming, and long-term support.',
				),
				array(
					'question' => 'Which eCommerce platforms do you support?',
					'answer'   => 'We support Adobe Commerce / Magento, Shopify, WooCommerce, headless commerce delivery, custom commerce solutions, and more complex marketplace-style implementations where needed.',
				),
				array(
					'question' => 'Do you build both B2B and B2C eCommerce solutions?',
					'answer'   => 'Yes. We support B2B, B2C, and D2C commerce models with the workflows, UX, integrations, and operational logic each model typically requires.',
				),
				array(
					'question' => 'Can you create custom eCommerce development services based on our business model?',
					'answer'   => 'Yes. Our delivery approach is tailored around catalog structure, pricing logic, order flow, customer types, internal operations, and long-term growth priorities rather than a fixed template.',
				),
				array(
					'question' => 'Do you handle integrations with ERP, CRM, PIM, and payment systems?',
					'answer'   => 'Yes. Integration work is a core part of our commerce delivery, including ERP, CRM, PIM, payment, shipping, marketing, and custom API requirements based on your operating model.',
				),
				array(
					'question' => 'Can you improve performance and conversion on an existing store?',
					'answer'   => 'Yes. We can review existing storefronts and identify improvements across performance, mobile usability, checkout flow, merchandising, and conversion-focused UX.',
				),
				array(
					'question' => 'Do you provide support and maintenance after launch?',
					'answer'   => 'Yes. We support maintenance, bug fixing, enhancements, upgrades, integration support, and growth-focused improvements after the initial release.',
				),
				array(
					'question' => 'Can you help with replatforming from one eCommerce platform to another?',
					'answer'   => 'Yes. We support replatforming projects that require better performance, more flexibility, stronger integrations, improved UX, or a more scalable commerce foundation.',
				),
				array(
					'question' => 'Do you support headless or custom commerce builds?',
					'answer'   => 'Yes. We can deliver headless commerce architectures and custom commerce solutions when experience requirements or business logic go beyond standard platform patterns.',
				),
				array(
					'question' => 'How do you choose the right platform for a business?',
					'answer'   => 'We evaluate business model, catalog complexity, integration needs, internal workflows, scale expectations, and growth goals to recommend the most suitable commerce approach.',
				),
			),
			'ctaTitle'      => 'Looking for an eCommerce Development Company?',
			'ctaText'       => 'Discuss new store builds, replatforming, B2B or B2C commerce needs, integrations, performance optimization, or long-term growth plans with a team that can shape the right commerce delivery model.',
			'ctaHighlights' => array(
				'Custom eCommerce development services aligned to your business model',
				'Platform builds, integrations, optimization, and post-launch support',
				'Support for Adobe Commerce, Shopify, WooCommerce, headless, and custom commerce',
			),
			'ctaSteps'      => array(
				array(
					'title' => 'Share your commerce goals',
					'copy'  => 'Tell us about your platform, catalog, integrations, growth priorities, and any operational challenges.',
				),
				array(
					'title' => 'Review the right delivery path',
					'copy'  => 'We help map platform fit, architecture direction, integration scope, and the most suitable engagement approach.',
				),
				array(
					'title' => 'Move into planning',
					'copy'  => 'Leave with clearer next steps for discovery, implementation, optimization, and long-term commerce growth.',
				),
			),
		);

		return $data;
	}
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_heading' ) ) {
	function ethnic_ecommerce_development_page_heading( $eyebrow, $title, $copy = '' ) {
		ob_start();
		?>
		<div class="ethnic-ecommerce-heading">
			<?php if ( $eyebrow ) : ?>
				<p class="ethnic-ecommerce-heading__eyebrow"><?php echo esc_html( $eyebrow ); ?></p>
			<?php endif; ?>
			<h2 class="ethnic-ecommerce-heading__title"><?php echo esc_html( $title ); ?></h2>
			<?php if ( $copy ) : ?>
				<p class="ethnic-ecommerce-heading__copy"><?php echo esc_html( $copy ); ?></p>
			<?php endif; ?>
		</div>
		<?php

		return ob_get_clean();
	}
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_icon' ) ) {
	function ethnic_ecommerce_development_page_icon( $icon ) {
		ob_start();

		switch ( $icon ) {
			case 'bag':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<path d="M5 8.2h14l-1.1 10H6.1L5 8.2z" />
					<path d="M8.2 8.2V6.4A3.8 3.8 0 0 1 12 2.8a3.8 3.8 0 0 1 3.8 3.6v1.8" />
				</svg>
				<?php
				break;

			case 'layers':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<path d="M12 4l8 4.2-8 4.2-8-4.2z" />
					<path d="M4 12l8 4.2 8-4.2" />
					<path d="M4 15.8l8 4.2 8-4.2" />
				</svg>
				<?php
				break;

			case 'spark':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<path d="M12 3.5l1.8 4.7 4.7 1.8-4.7 1.8-1.8 4.7-1.8-4.7-4.7-1.8 4.7-1.8z" />
					<path d="M18.3 15.2l.9 2.4 2.4.9-2.4.9-.9 2.4-.9-2.4-2.4-.9 2.4-.9z" />
				</svg>
				<?php
				break;

			case 'growth':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<path d="M4.5 18.5h15" />
					<path d="M7 15.2l3-3 3 3 4.5-5" />
					<path d="M14.7 10.2h3.8V14" />
				</svg>
				<?php
				break;

			case 'grid':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<rect x="4" y="4" width="6" height="6" rx="1.2" />
					<rect x="14" y="4" width="6" height="6" rx="1.2" />
					<rect x="4" y="14" width="6" height="6" rx="1.2" />
					<rect x="14" y="14" width="6" height="6" rx="1.2" />
				</svg>
				<?php
				break;

			case 'store':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<path d="M4.2 9.2h15.6l-1.2 10.2H5.4L4.2 9.2z" />
					<path d="M6.2 9.2 7.5 5h9l1.3 4.2" />
					<path d="M9.2 13h5.6" />
				</svg>
				<?php
				break;

			case 'globe':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<circle cx="12" cy="12" r="8.5" />
					<path d="M3.8 12h16.4" />
					<path d="M12 3.5a13.5 13.5 0 0 1 0 17" />
					<path d="M12 3.5a13.5 13.5 0 0 0 0 17" />
				</svg>
				<?php
				break;

			case 'briefcase':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<rect x="3.8" y="7.2" width="16.4" height="11" rx="2" />
					<path d="M9 7.2V5.8A1.8 1.8 0 0 1 10.8 4h2.4A1.8 1.8 0 0 1 15 5.8v1.4" />
					<path d="M3.8 11.5h16.4" />
				</svg>
				<?php
				break;

			case 'cart':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<path d="M4.5 5h2l1.6 8h8.7l1.7-5.2H8.7" />
					<circle cx="10.2" cy="18.2" r="1.4" />
					<circle cx="16.4" cy="18.2" r="1.4" />
				</svg>
				<?php
				break;

			case 'bolt':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<path d="M13.2 2.8 6.8 13h4.4L10.8 21l6.4-10.2h-4.4z" />
				</svg>
				<?php
				break;

			case 'plug':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<path d="M9 4.2v4.4" />
					<path d="M15 4.2v4.4" />
					<path d="M7.2 8.5h9.6v2.7a4.8 4.8 0 0 1-4.8 4.8 4.8 4.8 0 0 1-4.8-4.8z" />
					<path d="M12 16v4.2" />
				</svg>
				<?php
				break;

			case 'users':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<circle cx="8" cy="9" r="2.4" />
					<circle cx="16.4" cy="9.4" r="2" />
					<path d="M4.5 18c.6-2.2 2.3-3.5 4.7-3.5s4.1 1.3 4.7 3.5" />
					<path d="M13.4 17.6c.4-1.7 1.8-2.7 3.7-2.7 1.4 0 2.6.6 3.4 1.8" />
				</svg>
				<?php
				break;

			case 'card':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<rect x="3.5" y="5.5" width="17" height="13" rx="2" />
					<path d="M3.5 10h17" />
					<path d="M7.5 14.2h3.4" />
				</svg>
				<?php
				break;

			case 'truck':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<path d="M3.5 7.8h10.8v7.1H3.5z" />
					<path d="M14.3 10h3.3l2.9 2.9v2H14.3z" />
					<circle cx="7.5" cy="17.2" r="1.5" />
					<circle cx="17.5" cy="17.2" r="1.5" />
				</svg>
				<?php
				break;

			case 'chart':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<path d="M4.5 18.5h15" />
					<rect x="6.2" y="11" width="2.6" height="7.5" rx=".8" />
					<rect x="10.8" y="8" width="2.6" height="10.5" rx=".8" />
					<rect x="15.4" y="5.2" width="2.6" height="13.3" rx=".8" />
				</svg>
				<?php
				break;

			case 'api':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<path d="M8.2 8.2 5 12l3.2 3.8" />
					<path d="M15.8 8.2 19 12l-3.2 3.8" />
					<path d="M13.2 6.5 10.8 17.5" />
				</svg>
				<?php
				break;

			case 'shield':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<path d="M12 3.5 18 6v5.2c0 4-2.4 7.6-6 9.4-3.6-1.8-6-5.4-6-9.4V6L12 3.5z" />
					<path d="M9.2 12.2l1.9 1.9 3.7-3.8" />
				</svg>
				<?php
				break;

			case 'compass':
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<circle cx="12" cy="12" r="8.5" />
					<path d="M15.8 8.2 13.6 13.6 8.2 15.8l2.2-5.4z" />
				</svg>
				<?php
				break;

			case 'check':
			default:
				?>
				<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
					<circle cx="12" cy="12" r="8.5" />
					<path d="M8.6 12.3 10.8 14.5 15.4 9.9" />
				</svg>
				<?php
				break;
		}

		return ob_get_clean();
	}
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_render' ) ) {
	function ethnic_ecommerce_development_page_render() {
		$data                = ethnic_ecommerce_development_page_data();
		$consultation_url    = ethnic_ecommerce_development_page_contact_url(
			array(
				'intent'  => 'consultation',
				'service' => 'ecommerce-development',
			)
		);
		$team_url            = ethnic_ecommerce_development_page_contact_url(
			array(
				'intent'  => 'team',
				'service' => 'ecommerce-development',
			)
		);
		$quote_url           = ethnic_ecommerce_development_page_contact_url(
			array(
				'intent'  => 'quote',
				'service' => 'ecommerce-development',
			)
		);
		$case_studies_url    = ethnic_ecommerce_development_page_case_studies_url();
		$case_studies        = function_exists( 'ethnic_case_studies_service_page_cards' )
			? ethnic_case_studies_service_page_cards(
				array(
					'page_id'        => get_queried_object_id(),
					'limit'          => 3,
					'filters'        => array(
						'service' => array( 'ecommerce-development' ),
					),
					'fallback_items' => $data['caseStudies'],
				)
			)
			: (array) $data['caseStudies'];
		$case_studies_anchor = ! empty( $case_studies ) ? '#case-studies' : $case_studies_url;

		ob_start();
		?>
		<div class="ethnic-ecommerce-page">
			<section class="ethnic-ecommerce-section ethnic-ecommerce-section--hero">
				<div class="ethnic-ecommerce-shell">
					<div class="ethnic-ecommerce-hero">
						<div class="ethnic-ecommerce-hero__copy">
							<p class="ethnic-ecommerce-kicker">Commerce Delivery</p>
							<h1 class="ethnic-ecommerce-hero__title"><?php echo esc_html( $data['heroTitle'] ); ?></h1>
							<p class="ethnic-ecommerce-hero__lead"><?php echo esc_html( $data['heroText'] ); ?></p>
							<div class="ethnic-ecommerce-actions">
								<a class="ethnic-ecommerce-button ethnic-ecommerce-button--primary" href="<?php echo esc_url( $consultation_url ); ?>">Book a Free Consultation</a>
								<a class="ethnic-ecommerce-button ethnic-ecommerce-button--secondary" href="<?php echo esc_url( $case_studies_anchor ); ?>">View Case Studies</a>
							</div>
							<ul class="ethnic-ecommerce-hero__points" aria-label="Commerce service highlights">
								<?php foreach ( (array) $data['heroPoints'] as $point ) : ?>
									<li><?php echo esc_html( $point ); ?></li>
								<?php endforeach; ?>
							</ul>
						</div>

						<div class="ethnic-ecommerce-hero__visual">
							<div class="ethnic-ecommerce-visual">
								<div class="ethnic-ecommerce-visual__window">
									<div class="ethnic-ecommerce-visual__window-bar">
										<span></span>
										<span></span>
										<span></span>
									</div>
									<div class="ethnic-ecommerce-visual__window-body">
										<div class="ethnic-ecommerce-visual__nav">
											<span>Storefront</span>
											<span>Collections</span>
											<span>Checkout</span>
										</div>
										<div class="ethnic-ecommerce-visual__hero-card">
											<div class="ethnic-ecommerce-visual__product-shot"></div>
											<div class="ethnic-ecommerce-visual__product-copy">
												<span class="ethnic-ecommerce-visual__eyebrow">Conversion-ready PDP</span>
												<strong>Product page UX for merchandising, trust, and checkout momentum.</strong>
												<p>Variant clarity, delivery cues, cross-sell opportunities, and mobile-first structure built into the shopping flow.</p>
												<div class="ethnic-ecommerce-visual__tags">
													<span>Fast mobile UX</span>
													<span>Cross-sell blocks</span>
													<span>Integration-ready</span>
												</div>
											</div>
										</div>
										<div class="ethnic-ecommerce-visual__catalog">
											<div class="ethnic-ecommerce-visual__catalog-item">
												<small>Featured collection</small>
												<strong>Seasonal storefront launch</strong>
											</div>
											<div class="ethnic-ecommerce-visual__catalog-item">
												<small>Checkout signal</small>
												<strong>Shipping, payment, tax, and order sync</strong>
											</div>
										</div>
									</div>
								</div>
								<div class="ethnic-ecommerce-visual__floating ethnic-ecommerce-visual__floating--checkout">
									<p class="ethnic-ecommerce-visual__floating-label">Checkout UI</p>
									<strong>Guest checkout + saved account flow</strong>
									<ul>
										<li>Address and shipping logic</li>
										<li>Payment routing and trust cues</li>
										<li>Order confirmation and tracking setup</li>
									</ul>
								</div>
								<div class="ethnic-ecommerce-visual__floating ethnic-ecommerce-visual__floating--ops">
									<p class="ethnic-ecommerce-visual__floating-label">Commerce Ops</p>
									<div class="ethnic-ecommerce-visual__metric-row">
										<div>
											<small>Platform</small>
											<strong>Scalable</strong>
										</div>
										<div>
											<small>Integrations</small>
											<strong>Connected</strong>
										</div>
									</div>
									<div class="ethnic-ecommerce-visual__progress">
										<span></span>
										<span></span>
										<span></span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>

			<section class="ethnic-ecommerce-section" id="overview">
				<div class="ethnic-ecommerce-shell">
					<?php echo ethnic_ecommerce_development_page_heading( 'Overview', 'Custom eCommerce development services for brands, merchants, and enterprises.', 'We support strategy, design, development, integrations, optimization, and long-term commerce growth through a delivery model built around performance, operations, and conversion outcomes.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
					<div class="ethnic-ecommerce-overview">
						<div class="ethnic-ecommerce-prose">
							<?php foreach ( (array) $data['overviewParagraphs'] as $paragraph ) : ?>
								<p><?php echo esc_html( $paragraph ); ?></p>
							<?php endforeach; ?>
						</div>

						<div class="ethnic-ecommerce-card-grid ethnic-ecommerce-card-grid--overview">
							<?php foreach ( (array) $data['overviewFeatures'] as $feature ) : ?>
								<article class="ethnic-ecommerce-card">
									<div class="ethnic-ecommerce-card__icon">
										<?php echo ethnic_ecommerce_development_page_icon( $feature['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
									</div>
									<h3><?php echo esc_html( $feature['title'] ); ?></h3>
									<p><?php echo esc_html( $feature['copy'] ); ?></p>
								</article>
							<?php endforeach; ?>
						</div>
					</div>
				</div>
			</section>

			<section class="ethnic-ecommerce-section ethnic-ecommerce-section--soft" id="platforms">
				<div class="ethnic-ecommerce-shell">
					<?php echo ethnic_ecommerce_development_page_heading( 'Platforms Supported', 'Platform support shaped around your commerce model and growth path.', $data['platformIntro'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
					<div class="ethnic-ecommerce-card-grid ethnic-ecommerce-card-grid--platforms">
						<?php foreach ( (array) $data['platforms'] as $platform ) : ?>
							<article class="ethnic-ecommerce-platform-card">
								<div class="ethnic-ecommerce-platform-card__top">
									<div class="ethnic-ecommerce-platform-card__icon">
										<?php echo ethnic_ecommerce_development_page_icon( $platform['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
									</div>
									<span class="ethnic-ecommerce-platform-card__badge"><?php echo esc_html( $platform['badge'] ); ?></span>
								</div>
								<h3><?php echo esc_html( $platform['title'] ); ?></h3>
								<p><?php echo esc_html( $platform['description'] ); ?></p>
								<a class="ethnic-ecommerce-inline-link" href="<?php echo esc_url( ethnic_ecommerce_development_page_platform_url( $platform['slug'] ) ); ?>">Explore Platform</a>
							</article>
						<?php endforeach; ?>
					</div>
				</div>
			</section>

			<section class="ethnic-ecommerce-section" id="commerce-models">
				<div class="ethnic-ecommerce-shell">
					<?php echo ethnic_ecommerce_development_page_heading( 'B2B / B2C / D2C', 'Commerce capabilities matched to how your business sells.', 'Different commerce models create different UX, pricing, workflow, integration, and growth requirements. We shape the experience around the model, the buyer journey, and the operational logic behind it.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
					<div class="ethnic-ecommerce-card-grid ethnic-ecommerce-card-grid--models">
						<?php foreach ( (array) $data['models'] as $model ) : ?>
							<article class="ethnic-ecommerce-model-card">
								<div class="ethnic-ecommerce-card__icon">
									<?php echo ethnic_ecommerce_development_page_icon( $model['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
								</div>
								<h3><?php echo esc_html( $model['title'] ); ?></h3>
								<p><?php echo esc_html( $model['description'] ); ?></p>
								<ul class="ethnic-ecommerce-checklist">
									<?php foreach ( (array) $model['highlights'] as $highlight ) : ?>
										<li><?php echo esc_html( $highlight ); ?></li>
									<?php endforeach; ?>
								</ul>
							</article>
						<?php endforeach; ?>
					</div>
				</div>
			</section>

			<section class="ethnic-ecommerce-section ethnic-ecommerce-section--soft" id="integrations">
				<div class="ethnic-ecommerce-shell">
					<?php echo ethnic_ecommerce_development_page_heading( 'Integrations', 'Connected commerce systems that support operations and customer experience.', $data['integrationsIntro'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
					<div class="ethnic-ecommerce-card-grid ethnic-ecommerce-card-grid--integrations">
						<?php foreach ( (array) $data['integrations'] as $integration ) : ?>
							<article class="ethnic-ecommerce-integration-card">
								<div class="ethnic-ecommerce-card__icon">
									<?php echo ethnic_ecommerce_development_page_icon( $integration['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
								</div>
								<h3><?php echo esc_html( $integration['title'] ); ?></h3>
								<p><?php echo esc_html( $integration['copy'] ); ?></p>
							</article>
						<?php endforeach; ?>
					</div>
				</div>
			</section>

			<section class="ethnic-ecommerce-section" id="performance">
				<div class="ethnic-ecommerce-shell">
					<div class="ethnic-ecommerce-performance">
						<div class="ethnic-ecommerce-performance__copy">
							<?php echo ethnic_ecommerce_development_page_heading( 'Performance and Conversion Focus', 'Commerce performance shaped around speed, usability, and revenue outcomes.', 'We improve fast storefront experiences, mobile usability, checkout performance, and scalable architecture so the commerce experience supports growth without creating unnecessary friction.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
							<?php foreach ( (array) $data['performanceParagraphs'] as $paragraph ) : ?>
								<p><?php echo esc_html( $paragraph ); ?></p>
							<?php endforeach; ?>
							<ul class="ethnic-ecommerce-checklist ethnic-ecommerce-checklist--performance">
								<?php foreach ( (array) $data['performanceChecklist'] as $item ) : ?>
									<li><?php echo esc_html( $item ); ?></li>
								<?php endforeach; ?>
							</ul>
						</div>

						<div class="ethnic-ecommerce-performance__visual">
							<div class="ethnic-ecommerce-dashboard">
								<p class="ethnic-ecommerce-dashboard__eyebrow">Performance Blueprint</p>
								<div class="ethnic-ecommerce-dashboard__cards">
									<?php foreach ( (array) $data['performanceCards'] as $card ) : ?>
										<div class="ethnic-ecommerce-dashboard__card">
											<small><?php echo esc_html( $card['label'] ); ?></small>
											<strong><?php echo esc_html( $card['value'] ); ?></strong>
											<p><?php echo esc_html( $card['copy'] ); ?></p>
										</div>
									<?php endforeach; ?>
								</div>
								<div class="ethnic-ecommerce-dashboard__journey">
									<div class="ethnic-ecommerce-dashboard__journey-step">
										<span>01</span>
										<div>
											<strong>Browse with less friction</strong>
											<p>Better discovery, category flow, and product detail structure.</p>
										</div>
									</div>
									<div class="ethnic-ecommerce-dashboard__journey-step">
										<span>02</span>
										<div>
											<strong>Move faster to cart and checkout</strong>
											<p>Cleaner intent cues, fewer blockers, and stronger trust signals.</p>
										</div>
									</div>
									<div class="ethnic-ecommerce-dashboard__journey-step">
										<span>03</span>
										<div>
											<strong>Support scale after launch</strong>
											<p>Architecture, integrations, and performance tuned for ongoing growth.</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>

			<section class="ethnic-ecommerce-section ethnic-ecommerce-section--soft" id="support">
				<div class="ethnic-ecommerce-shell">
					<?php echo ethnic_ecommerce_development_page_heading( 'Support and Growth Services', 'Ongoing commerce support after launch.', 'We help teams maintain stability, deliver enhancements, support integrations, improve performance, and keep the platform moving forward as business needs evolve.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
					<div class="ethnic-ecommerce-card-grid ethnic-ecommerce-card-grid--support">
						<?php foreach ( (array) $data['supportCards'] as $support ) : ?>
							<article class="ethnic-ecommerce-support-card">
								<p class="ethnic-ecommerce-support-card__label"><?php echo esc_html( $support['label'] ); ?></p>
								<div class="ethnic-ecommerce-card__icon">
									<?php echo ethnic_ecommerce_development_page_icon( $support['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
								</div>
								<h3><?php echo esc_html( $support['title'] ); ?></h3>
								<p><?php echo esc_html( $support['description'] ); ?></p>
								<ul class="ethnic-ecommerce-checklist">
									<?php foreach ( (array) $support['items'] as $item ) : ?>
										<li><?php echo esc_html( $item ); ?></li>
									<?php endforeach; ?>
								</ul>
							</article>
						<?php endforeach; ?>
					</div>
				</div>
			</section>

			<?php if ( ! empty( $case_studies ) ) : ?>
			<section class="ethnic-ecommerce-section ethnic-ecommerce-section--contrast" id="case-studies">
				<div class="ethnic-ecommerce-shell">
					<?php echo ethnic_ecommerce_development_page_heading( 'Case Studies', 'Commerce delivery examples for replatforming, storefront growth, and operational scale.', 'The examples below reflect the type of commerce strategy, platform delivery, and optimization work we support across different business models.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
					<?php echo ethnic_shared_case_study_showcase_render( $case_studies, array( 'carousel_label' => 'eCommerce case studies showcase' ) ); ?>
				</div>
			</section>
			<?php endif; ?>

			<section class="ethnic-ecommerce-section" id="faq">
				<div class="ethnic-ecommerce-shell ethnic-ecommerce-shell--narrow">
					<?php echo ethnic_ecommerce_development_page_heading( 'FAQs', 'Answers to common questions about our eCommerce development services.', 'These FAQs clarify platform support, integrations, performance optimization, replatforming, and ongoing commerce support.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
					<div class="ethnic-ecommerce-faq">
						<?php foreach ( (array) $data['faqs'] as $index => $faq ) : ?>
							<details class="ethnic-ecommerce-faq__item" <?php echo 0 === $index ? 'open' : ''; ?>>
								<summary>
									<span><?php echo esc_html( $faq['question'] ); ?></span>
									<span class="ethnic-ecommerce-faq__marker" aria-hidden="true"></span>
								</summary>
								<div class="ethnic-ecommerce-faq__answer">
									<p><?php echo esc_html( $faq['answer'] ); ?></p>
								</div>
							</details>
						<?php endforeach; ?>
					</div>
				</div>
			</section>

			<section class="ethnic-ecommerce-section ethnic-ecommerce-section--cta" id="cta">
				<div class="ethnic-ecommerce-shell">
					<div class="ethnic-ecommerce-cta">
						<div class="ethnic-ecommerce-cta__copy">
							<div class="ethnic-ecommerce-cta__intro">
								<p class="ethnic-ecommerce-kicker ethnic-ecommerce-kicker--light">Ready to Talk</p>
								<p class="ethnic-ecommerce-cta__note">Planning for new builds, replatforming, integrations, and long-term commerce growth.</p>
							</div>
							<h2><?php echo esc_html( $data['ctaTitle'] ); ?></h2>
							<p class="ethnic-ecommerce-cta__lead"><?php echo esc_html( $data['ctaText'] ); ?></p>
							<div class="ethnic-ecommerce-actions">
								<a class="ethnic-ecommerce-button ethnic-ecommerce-button--primary" href="<?php echo esc_url( $team_url ); ?>">Talk to Our Team</a>
								<a class="ethnic-ecommerce-button ethnic-ecommerce-button--secondary" href="<?php echo esc_url( $quote_url ); ?>">Get a Free Quote</a>
							</div>
							<ul class="ethnic-ecommerce-cta__highlights" aria-label="Commerce CTA highlights">
								<?php foreach ( (array) $data['ctaHighlights'] as $highlight ) : ?>
									<li><?php echo esc_html( $highlight ); ?></li>
								<?php endforeach; ?>
							</ul>
						</div>

						<aside class="ethnic-ecommerce-cta__panel" aria-label="What happens next">
							<div class="ethnic-ecommerce-cta__panel-header">
								<p class="ethnic-ecommerce-cta__panel-eyebrow">What Happens Next</p>
								<h3 class="ethnic-ecommerce-cta__panel-title">Plan the right commerce delivery path</h3>
							</div>
							<ol class="ethnic-ecommerce-cta__steps">
								<?php foreach ( (array) $data['ctaSteps'] as $index => $step ) : ?>
									<li class="ethnic-ecommerce-cta__step">
										<span class="ethnic-ecommerce-cta__step-number"><?php echo esc_html( sprintf( '%02d', $index + 1 ) ); ?></span>
										<div class="ethnic-ecommerce-cta__step-copy">
											<strong><?php echo esc_html( $step['title'] ); ?></strong>
											<p><?php echo esc_html( $step['copy'] ); ?></p>
										</div>
									</li>
								<?php endforeach; ?>
							</ol>
							<div class="ethnic-ecommerce-cta__panel-note"><strong>Focus:</strong> platform fit, integration planning, performance priorities, and long-term commerce growth.</div>
						</aside>
					</div>
				</div>
			</section>
		</div>
		<?php

		return ob_get_clean();
	}
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_styles' ) ) {
	function ethnic_ecommerce_development_page_styles() {
		return <<<'CSS'
body.ethnic-ecommerce-development-target #page-title.page-title-block.custom-page-title {
	display: none;
}

body.ethnic-ecommerce-development-target .fullwidth-content > .ethnic-ecommerce-page {
	padding-bottom: clamp(72px, 8vw, 120px);
}

body.ethnic-ecommerce-development-target .block-content > .container {
	width: 100%;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

body.ethnic-ecommerce-development-target .block-content > .container > .panel.row {
	margin-left: 0;
	margin-right: 0;
}

body.ethnic-ecommerce-development-target .block-content > .container > .panel > .panel-center {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

body.ethnic-ecommerce-development-target .entry-content.post-content {
	margin-bottom: 0;
}

.ethnic-ecommerce-page {
	--ethnic-ecommerce-text: #0f172a;
	--ethnic-ecommerce-muted: #5d6d83;
	--ethnic-ecommerce-border: rgba(15, 23, 42, 0.09);
	--ethnic-ecommerce-surface: rgba(255, 255, 255, 0.96);
	--ethnic-ecommerce-surface-strong: #ffffff;
	--ethnic-ecommerce-soft: rgba(243, 247, 255, 0.96);
	--ethnic-ecommerce-accent: #2f6bff;
	--ethnic-ecommerce-accent-dark: #18388f;
	--ethnic-ecommerce-cyan: #0ea5e9;
	--ethnic-ecommerce-lime: #e7ff89;
	--ethnic-ecommerce-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
	--ethnic-ecommerce-shadow-strong: 0 28px 80px rgba(15, 23, 42, 0.16);
	color: var(--ethnic-ecommerce-text);
	overflow-x: clip;
}

.ethnic-ecommerce-page,
.ethnic-ecommerce-page *,
.ethnic-ecommerce-page *::before,
.ethnic-ecommerce-page *::after {
	box-sizing: border-box;
}

.ethnic-ecommerce-shell {
	width: min(1240px, calc(100% - (var(--ethnic-ecommerce-shell-padding, 36px) * 2)));
	margin: 0 auto;
}

.ethnic-ecommerce-shell--narrow {
	width: min(980px, calc(100% - (var(--ethnic-ecommerce-shell-padding, 36px) * 2)));
}

.ethnic-ecommerce-section + .ethnic-ecommerce-section {
	margin-top: clamp(72px, 8vw, 112px);
}

.ethnic-ecommerce-section--soft {
	padding: clamp(28px, 4vw, 36px) 0;
}

.ethnic-ecommerce-section--contrast {
	padding: clamp(42px, 5vw, 58px) 0;
	border-radius: 36px;
	background: linear-gradient(180deg, rgba(11, 23, 46, 0.98), rgba(16, 30, 59, 0.98));
}

.ethnic-ecommerce-page p,
.ethnic-ecommerce-page li {
	color: var(--ethnic-ecommerce-muted);
	font-size: 16px;
	line-height: 1.78;
}

.ethnic-ecommerce-kicker,
.ethnic-ecommerce-heading__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	min-height: 34px;
	margin: 0 0 16px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	backdrop-filter: blur(10px);
}

.ethnic-ecommerce-kicker::before,
.ethnic-ecommerce-heading__eyebrow::before,
.ethnic-ecommerce-cta__panel-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}

.ethnic-ecommerce-kicker--light,
.ethnic-ecommerce-heading__eyebrow {
	background: rgba(47, 107, 255, 0.1);
	border-color: rgba(47, 107, 255, 0.16);
	color: var(--ethnic-ecommerce-accent) !important;
	-webkit-text-fill-color: var(--ethnic-ecommerce-accent);
	text-shadow: none;
}

.ethnic-ecommerce-heading {
	max-width: 820px;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.ethnic-ecommerce-heading__title,
.ethnic-ecommerce-hero__title,
.ethnic-ecommerce-cta h2 {
	margin: 0;
	font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
	font-weight: 700;
	letter-spacing: -0.05em;
	text-wrap: balance;
}

.ethnic-ecommerce-heading__title,
.ethnic-ecommerce-cta h2 {
	color: var(--ethnic-ecommerce-text);
	font-size: clamp(32px, 3vw, 44px);
	line-height: 1.06;
}

.ethnic-ecommerce-heading__copy,
.ethnic-ecommerce-prose p,
.ethnic-ecommerce-card p,
.ethnic-ecommerce-platform-card p,
.ethnic-ecommerce-model-card p,
.ethnic-ecommerce-integration-card p,
.ethnic-ecommerce-support-card p,
.ethnic-ecommerce-case-card p,
.ethnic-ecommerce-faq__answer p,
.ethnic-ecommerce-performance__copy p,
.ethnic-ecommerce-cta__lead,
.ethnic-ecommerce-cta__step-copy p {
	margin: 18px 0 0;
}

.ethnic-ecommerce-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(420px, 0.95fr);
	gap: clamp(32px, 5vw, 68px);
	align-items: center;
	min-height: clamp(600px, 72vw, 760px);
	padding: clamp(82px, 8vw, 128px) 0;
}

.ethnic-ecommerce-section--hero {
	position: relative;
	background:
		radial-gradient(circle at 18% 18%, rgba(47, 107, 255, 0.22), transparent 26%),
		radial-gradient(circle at 84% 18%, rgba(14, 165, 233, 0.16), transparent 20%),
		linear-gradient(180deg, #091328, #112447 55%, #152c56);
}

.ethnic-ecommerce-section--hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 36px 36px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.36), transparent 80%);
	pointer-events: none;
}

.ethnic-ecommerce-hero__copy {
	position: relative;
	z-index: 1;
}

.ethnic-ecommerce-hero__title {
	max-width: 10ch;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
	font-size: clamp(44px, 5.2vw, 74px);
	line-height: 0.98;
}

.ethnic-ecommerce-hero__lead {
	max-width: 60ch;
	margin: 20px 0 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(17px, 1.45vw, 20px);
	line-height: 1.82;
}

.ethnic-ecommerce-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

.ethnic-ecommerce-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 14px 24px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.ethnic-ecommerce-button:hover,
.ethnic-ecommerce-button:focus-visible {
	transform: translateY(-1px);
	text-decoration: none;
}

.ethnic-ecommerce-button--primary {
	background: var(--ethnic-ecommerce-lime);
	color: #0b1730 !important;
	box-shadow: 0 20px 44px rgba(5, 14, 28, 0.24);
}

.ethnic-ecommerce-button--primary:hover,
.ethnic-ecommerce-button--primary:focus-visible {
	background: #f1ffb7;
	color: #0b1730 !important;
	box-shadow: 0 24px 50px rgba(5, 14, 28, 0.28);
}

.ethnic-ecommerce-button--secondary {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
	color: #ffffff !important;
}

.ethnic-ecommerce-button--ghost {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
	color: #ffffff !important;
}

.ethnic-ecommerce-button--ghost:hover,
.ethnic-ecommerce-button--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.18);
}

.ethnic-ecommerce-hero__points,
.ethnic-ecommerce-checklist,
.ethnic-ecommerce-cta__highlights {
	display: grid;
	gap: 12px;
	padding: 0;
	margin: 26px 0 0;
	list-style: none;
}

.ethnic-ecommerce-hero__points {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 860px;
}

.ethnic-ecommerce-hero__points li,
.ethnic-ecommerce-checklist li,
.ethnic-ecommerce-cta__highlights li {
	position: relative;
	padding-left: 22px;
}

.ethnic-ecommerce-hero__points li {
	padding: 16px 18px 16px 42px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.88);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.ethnic-ecommerce-hero__points li::before,
.ethnic-ecommerce-checklist li::before,
.ethnic-ecommerce-cta__highlights li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.38em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ethnic-ecommerce-lime);
	box-shadow: 0 0 0 5px rgba(231, 255, 137, 0.16);
}

.ethnic-ecommerce-hero__points li::before {
	left: 18px;
	top: 20px;
}

.ethnic-ecommerce-hero__visual {
	position: relative;
	z-index: 1;
}

.ethnic-ecommerce-visual {
	position: relative;
	min-height: 560px;
}

.ethnic-ecommerce-visual__window {
	position: relative;
	padding: 22px;
	border-radius: 34px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
		rgba(9, 20, 38, 0.76);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 30px 80px rgba(5, 14, 28, 0.32);
	backdrop-filter: blur(18px);
}

.ethnic-ecommerce-visual__window-bar {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
}

.ethnic-ecommerce-visual__window-bar span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.52);
}

.ethnic-ecommerce-visual__window-body {
	padding: 18px;
	border-radius: 26px;
	background:
		radial-gradient(circle at top right, rgba(47, 107, 255, 0.18), transparent 28%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.96));
	border: 1px solid rgba(255, 255, 255, 0.62);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.ethnic-ecommerce-visual__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.ethnic-ecommerce-visual__nav span,
.ethnic-ecommerce-visual__tags span {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(47, 107, 255, 0.08);
	color: var(--ethnic-ecommerce-accent-dark);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.ethnic-ecommerce-visual__hero-card {
	display: grid;
	grid-template-columns: minmax(110px, 0.72fr) minmax(0, 1fr);
	gap: 18px;
	padding: 18px;
	border-radius: 24px;
	background: var(--ethnic-ecommerce-surface-strong);
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.ethnic-ecommerce-visual__product-shot {
	min-height: 188px;
	border-radius: 20px;
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9), transparent 22%),
		linear-gradient(150deg, rgba(14, 165, 233, 0.18), rgba(47, 107, 255, 0.08)),
		linear-gradient(180deg, #eff6ff, #dbeafe);
	position: relative;
	overflow: hidden;
}

.ethnic-ecommerce-visual__product-shot::before,
.ethnic-ecommerce-visual__product-shot::after {
	content: "";
	position: absolute;
	border-radius: 18px;
}

.ethnic-ecommerce-visual__product-shot::before {
	inset: 16px;
	background: linear-gradient(180deg, #ffffff, #eef4ff);
	border: 1px solid rgba(47, 107, 255, 0.14);
}

.ethnic-ecommerce-visual__product-shot::after {
	left: 34px;
	right: 34px;
	bottom: 24px;
	height: 42px;
	background: rgba(47, 107, 255, 0.12);
}

.ethnic-ecommerce-visual__product-copy strong,
.ethnic-ecommerce-dashboard__journey-step strong,
.ethnic-ecommerce-cta__step-copy strong {
	display: block;
	margin: 0;
	color: var(--ethnic-ecommerce-text);
	font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.ethnic-ecommerce-visual__eyebrow {
	display: inline-flex;
	margin-bottom: 8px;
	color: var(--ethnic-ecommerce-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

.ethnic-ecommerce-visual__product-copy p {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.7;
}

.ethnic-ecommerce-visual__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.ethnic-ecommerce-visual__catalog {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 16px;
}

.ethnic-ecommerce-visual__catalog-item {
	padding: 16px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.74);
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.ethnic-ecommerce-visual__catalog-item small,
.ethnic-ecommerce-visual__floating-label,
.ethnic-ecommerce-dashboard__eyebrow,
.ethnic-ecommerce-support-card__label,
.ethnic-ecommerce-cta__note {
	display: inline-flex;
	color: rgba(15, 23, 42, 0.58);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.ethnic-ecommerce-visual__catalog-item strong {
	display: block;
	margin-top: 8px;
	color: var(--ethnic-ecommerce-text);
	font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}

.ethnic-ecommerce-visual__floating {
	position: absolute;
	padding: 18px;
	border-radius: 24px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.9)),
		var(--ethnic-ecommerce-surface-strong);
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 20px 50px rgba(5, 14, 28, 0.16);
	backdrop-filter: blur(16px);
}

.ethnic-ecommerce-visual__floating strong {
	display: block;
	margin-top: 8px;
	color: var(--ethnic-ecommerce-text);
	font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.ethnic-ecommerce-visual__floating ul {
	display: grid;
	gap: 10px;
	padding: 0;
	margin: 14px 0 0;
	list-style: none;
}

.ethnic-ecommerce-visual__floating li {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.6;
}

.ethnic-ecommerce-visual__floating li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ethnic-ecommerce-accent);
	box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.12);
}

.ethnic-ecommerce-visual__floating--checkout {
	right: -14px;
	bottom: 22px;
	width: min(320px, 100%);
}

.ethnic-ecommerce-visual__floating--ops {
	left: -14px;
	top: 58px;
	width: min(260px, 100%);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
		linear-gradient(180deg, #102240, #0c1931);
	border-color: rgba(255, 255, 255, 0.1);
}

.ethnic-ecommerce-visual__floating--ops .ethnic-ecommerce-visual__floating-label,
.ethnic-ecommerce-visual__floating--ops strong,
.ethnic-ecommerce-visual__floating--ops small {
	color: #ffffff;
}

.ethnic-ecommerce-visual__metric-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 14px;
}

.ethnic-ecommerce-visual__metric-row div {
	padding: 14px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.08);
}

.ethnic-ecommerce-visual__metric-row small {
	display: block;
	color: rgba(255, 255, 255, 0.66);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ethnic-ecommerce-visual__metric-row strong {
	margin-top: 8px;
	font-size: 16px;
}

.ethnic-ecommerce-visual__progress {
	display: grid;
	gap: 8px;
	margin-top: 16px;
}

.ethnic-ecommerce-visual__progress span {
	display: block;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(231, 255, 137, 0.9), rgba(47, 107, 255, 0.85));
}

.ethnic-ecommerce-visual__progress span:nth-child(2) {
	width: 82%;
}

.ethnic-ecommerce-visual__progress span:nth-child(3) {
	width: 68%;
}

.ethnic-ecommerce-overview,
.ethnic-ecommerce-performance {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
}

.ethnic-ecommerce-card-grid {
	display: grid;
	gap: 20px;
}

.ethnic-ecommerce-card-grid--overview {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ethnic-ecommerce-card,
.ethnic-ecommerce-platform-card,
.ethnic-ecommerce-model-card,
.ethnic-ecommerce-integration-card,
.ethnic-ecommerce-support-card,
.ethnic-ecommerce-case-card,
.ethnic-ecommerce-dashboard,
.ethnic-ecommerce-faq__item,
.ethnic-ecommerce-cta {
	border-radius: 28px;
	border: 1px solid var(--ethnic-ecommerce-border);
	box-shadow: var(--ethnic-ecommerce-shadow);
}

.ethnic-ecommerce-card,
.ethnic-ecommerce-platform-card,
.ethnic-ecommerce-model-card,
.ethnic-ecommerce-integration-card,
.ethnic-ecommerce-support-card,
.ethnic-ecommerce-case-card {
	padding: 24px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.96)),
		var(--ethnic-ecommerce-surface-strong);
}

.ethnic-ecommerce-card__icon,
.ethnic-ecommerce-platform-card__icon {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: rgba(47, 107, 255, 0.08);
	color: var(--ethnic-ecommerce-accent);
}

.ethnic-ecommerce-card__icon svg,
.ethnic-ecommerce-platform-card__icon svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.ethnic-ecommerce-card h3,
.ethnic-ecommerce-platform-card h3,
.ethnic-ecommerce-model-card h3,
.ethnic-ecommerce-integration-card h3,
.ethnic-ecommerce-support-card h3,
.ethnic-ecommerce-case-card h3 {
	margin: 18px 0 0;
	color: var(--ethnic-ecommerce-text);
	font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.ethnic-ecommerce-card-grid--platforms,
.ethnic-ecommerce-card-grid--models,
.ethnic-ecommerce-card-grid--support,
.ethnic-ecommerce-card-grid--case-studies {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ethnic-ecommerce-card-grid--integrations {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ethnic-ecommerce-platform-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ethnic-ecommerce-platform-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 34px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.04);
	color: var(--ethnic-ecommerce-text);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

.ethnic-ecommerce-inline-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--ethnic-ecommerce-accent);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.ethnic-ecommerce-inline-link::after {
	content: "->";
}

.ethnic-ecommerce-inline-link:hover,
.ethnic-ecommerce-inline-link:focus-visible {
	color: var(--ethnic-ecommerce-accent-dark);
	text-decoration: none;
}

.ethnic-ecommerce-model-card,
.ethnic-ecommerce-support-card {
	height: 100%;
}

.ethnic-ecommerce-checklist {
	gap: 10px;
	margin-top: 18px;
}

.ethnic-ecommerce-checklist li {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

.ethnic-ecommerce-checklist li::before,
.ethnic-ecommerce-cta__highlights li::before {
	background: var(--ethnic-ecommerce-accent);
	box-shadow: 0 0 0 5px rgba(47, 107, 255, 0.12);
}

.ethnic-ecommerce-dashboard {
	padding: 28px;
	background:
		radial-gradient(circle at top right, rgba(47, 107, 255, 0.12), transparent 30%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.96));
}

.ethnic-ecommerce-dashboard__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 18px;
}

.ethnic-ecommerce-dashboard__card {
	padding: 18px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}

.ethnic-ecommerce-dashboard__card small {
	display: block;
	color: rgba(15, 23, 42, 0.54);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
}

.ethnic-ecommerce-dashboard__card strong {
	display: block;
	margin-top: 10px;
	color: var(--ethnic-ecommerce-text);
	font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.ethnic-ecommerce-dashboard__card p {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.65;
}

.ethnic-ecommerce-dashboard__journey {
	display: grid;
	gap: 0;
	margin-top: 20px;
}

.ethnic-ecommerce-dashboard__journey-step {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 14px;
	padding: 18px 0;
}

.ethnic-ecommerce-dashboard__journey-step + .ethnic-ecommerce-dashboard__journey-step {
	border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ethnic-ecommerce-dashboard__journey-step span {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: rgba(47, 107, 255, 0.08);
	color: var(--ethnic-ecommerce-accent);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

.ethnic-ecommerce-dashboard__journey-step p {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.7;
}

.ethnic-ecommerce-support-card__label {
	margin: 0 0 16px;
}

.ethnic-ecommerce-section--contrast .ethnic-ecommerce-heading__title,
.ethnic-ecommerce-section--contrast .ethnic-ecommerce-heading__copy,
.ethnic-ecommerce-section--contrast .ethnic-ecommerce-heading__eyebrow {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
}

.ethnic-ecommerce-section--contrast .ethnic-ecommerce-heading__copy {
	opacity: 0.78;
}

.ethnic-ecommerce-section--contrast .ethnic-ecommerce-heading__eyebrow {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.14);
}

.ethnic-ecommerce-case-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
		rgba(255, 255, 255, 0.02);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 22px 60px rgba(5, 14, 28, 0.2);
}

.ethnic-ecommerce-case-card h3,
.ethnic-ecommerce-case-card p,
.ethnic-ecommerce-case-card strong {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
}

.ethnic-ecommerce-case-card h3 {
	margin: 0;
	font-size: clamp(24px, 1.9vw, 30px);
	line-height: 1.16;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.ethnic-ecommerce-case-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ethnic-ecommerce-case-card__tags span {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.92);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1;
}

.ethnic-ecommerce-case-card__summary {
	display: grid;
	gap: 12px;
	margin-top: 0;
}

.ethnic-ecommerce-case-card__summary p {
	margin: 0;
	font-size: 15px;
	line-height: 1.72;
	color: rgba(255, 255, 255, 0.82) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.82);
}

.ethnic-ecommerce-case-card__summary strong {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff;
}

.ethnic-ecommerce-case-card .ethnic-ecommerce-button--ghost {
	align-self: flex-start;
	margin-top: auto;
}

.ethnic-ecommerce-faq {
	display: grid;
	gap: 16px;
}

.ethnic-ecommerce-faq__item {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 255, 0.97)),
		var(--ethnic-ecommerce-surface-strong);
}

.ethnic-ecommerce-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 28px;
	cursor: pointer;
	list-style: none;
	color: var(--ethnic-ecommerce-text);
	font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
}

.ethnic-ecommerce-faq__item summary::-webkit-details-marker {
	display: none;
}

.ethnic-ecommerce-faq__item[open] summary {
	padding-bottom: 14px;
}

.ethnic-ecommerce-faq__marker {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(47, 107, 255, 0.08);
	color: var(--ethnic-ecommerce-accent);
}

.ethnic-ecommerce-faq__marker::before,
.ethnic-ecommerce-faq__marker::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.ethnic-ecommerce-faq__marker::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ethnic-ecommerce-faq__item[open] .ethnic-ecommerce-faq__marker::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.ethnic-ecommerce-faq__answer {
	padding: 0 28px 24px;
}

.ethnic-ecommerce-faq__answer p {
	margin: 0;
}

.ethnic-ecommerce-section--cta {
	padding-top: clamp(16px, 2vw, 24px);
}

.ethnic-ecommerce-cta {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
	gap: clamp(26px, 4vw, 54px);
	align-items: stretch;
	padding: clamp(34px, 4vw, 52px);
	text-align: left;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(circle at 12% 18%, rgba(47, 107, 255, 0.2), transparent 25%),
		radial-gradient(circle at 84% 12%, rgba(231, 255, 137, 0.3), transparent 20%),
		radial-gradient(circle at 78% 72%, rgba(14, 165, 233, 0.08), transparent 24%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 1) 50%, rgba(238, 245, 255, 0.98));
	border: 1px solid rgba(117, 144, 190, 0.2);
	box-shadow:
		0 26px 80px rgba(15, 23, 42, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.ethnic-ecommerce-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(47, 107, 255, 0.05) 1px, transparent 1px),
		linear-gradient(0deg, rgba(47, 107, 255, 0.05) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 76%);
	pointer-events: none;
	z-index: -1;
}

.ethnic-ecommerce-cta__copy {
	position: relative;
	display: grid;
	align-content: center;
}

.ethnic-ecommerce-cta__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 14px;
	margin-bottom: 4px;
}

.ethnic-ecommerce-cta .ethnic-ecommerce-kicker--light {
	margin-bottom: 0;
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(47, 107, 255, 0.18);
	color: #2558dc !important;
	-webkit-text-fill-color: #2558dc;
	box-shadow: 0 14px 36px rgba(47, 107, 255, 0.14);
}

.ethnic-ecommerce-cta__note {
	margin: 0;
	max-width: 40ch;
}

.ethnic-ecommerce-cta h2 {
	max-width: 10ch;
	font-size: clamp(36px, 4.5vw, 60px);
	line-height: 0.98;
	letter-spacing: -0.06em;
}

.ethnic-ecommerce-cta__lead {
	max-width: 58ch;
	color: rgba(15, 23, 42, 0.72);
	font-size: clamp(16px, 1.35vw, 18px);
	line-height: 1.82;
}

.ethnic-ecommerce-cta .ethnic-ecommerce-actions {
	gap: 16px;
	margin-top: 30px;
}

.ethnic-ecommerce-section--cta .ethnic-ecommerce-button--secondary {
	background: rgba(255, 255, 255, 0.74);
	border-color: rgba(15, 23, 42, 0.12);
	color: var(--ethnic-ecommerce-text) !important;
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
	backdrop-filter: blur(14px);
}

.ethnic-ecommerce-section--cta .ethnic-ecommerce-button--secondary:hover,
.ethnic-ecommerce-section--cta .ethnic-ecommerce-button--secondary:focus-visible {
	background: rgba(255, 255, 255, 0.88);
	border-color: rgba(15, 23, 42, 0.18);
}

.ethnic-ecommerce-cta__highlights {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 24px;
	gap: 14px;
}

.ethnic-ecommerce-cta__highlights li {
	display: flex;
	align-items: flex-start;
	min-height: 100%;
	padding: 16px 18px 16px 40px;
	border-radius: 24px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 251, 255, 0.76)),
		rgba(255, 255, 255, 0.74);
	border: 1px solid rgba(255, 255, 255, 0.72);
	color: var(--ethnic-ecommerce-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.55;
	box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
	backdrop-filter: blur(16px);
}

.ethnic-ecommerce-cta__highlights li::before {
	left: 18px;
	top: 20px;
}

.ethnic-ecommerce-cta__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 28px;
	border-radius: 30px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
		linear-gradient(180deg, #102240, #0f1d37 58%, #0b172e);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow:
		0 30px 70px rgba(15, 23, 42, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ethnic-ecommerce-cta__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(circle at top right, rgba(47, 107, 255, 0.24), transparent 34%),
		radial-gradient(circle at bottom left, rgba(231, 255, 137, 0.14), transparent 26%);
	pointer-events: none;
}

.ethnic-ecommerce-cta__panel-header {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 10px;
	margin-bottom: 10px;
}

.ethnic-ecommerce-cta__panel-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin: 0;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.92) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.92);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.ethnic-ecommerce-cta__panel-eyebrow::before {
	background: var(--ethnic-ecommerce-lime);
	box-shadow: 0 0 0 5px rgba(231, 255, 137, 0.12);
}

.ethnic-ecommerce-cta__panel-title {
	margin: 0;
	color: #f8fbff !important;
	-webkit-text-fill-color: #f8fbff;
	font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
	font-size: clamp(22px, 2.3vw, 28px);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.1;
}

.ethnic-ecommerce-cta__steps {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}

.ethnic-ecommerce-cta__step {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 16px;
	padding: 18px 0;
	align-items: start;
}

.ethnic-ecommerce-cta__step + .ethnic-ecommerce-cta__step {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ethnic-ecommerce-cta__step-number {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
		rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 16px 28px rgba(5, 14, 28, 0.18);
}

.ethnic-ecommerce-cta__step-copy strong,
.ethnic-ecommerce-cta__step-copy p {
	color: #ffffff;
}

.ethnic-ecommerce-cta__step-copy p {
	max-width: none;
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.74);
	font-size: 14px;
	line-height: 1.7;
}

.ethnic-ecommerce-cta__panel-note {
	position: relative;
	z-index: 1;
	margin-top: 20px;
	padding: 16px 18px;
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
		rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

.ethnic-ecommerce-cta__panel-note strong {
	color: #ffffff;
}

@media (max-width: 1200px) {
	.ethnic-ecommerce-hero__points,
	.ethnic-ecommerce-cta__highlights,
	.ethnic-ecommerce-card-grid--integrations {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ethnic-ecommerce-card-grid--platforms,
	.ethnic-ecommerce-card-grid--models,
	.ethnic-ecommerce-card-grid--support,
	.ethnic-ecommerce-card-grid--case-studies {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.ethnic-ecommerce-hero,
	.ethnic-ecommerce-overview,
	.ethnic-ecommerce-performance,
	.ethnic-ecommerce-cta {
		grid-template-columns: 1fr;
	}

	.ethnic-ecommerce-hero {
		min-height: auto;
	}

	.ethnic-ecommerce-hero__visual {
		max-width: 720px;
	}

	.ethnic-ecommerce-cta__panel,
	.ethnic-ecommerce-performance__visual {
		max-width: 760px;
	}
}

@media (max-width: 767px) {
	.ethnic-ecommerce-page {
		--ethnic-ecommerce-shell-padding: 20px;
	}

	.ethnic-ecommerce-section + .ethnic-ecommerce-section {
		margin-top: 58px;
	}

	.ethnic-ecommerce-hero {
		padding: 72px 0 68px;
	}

	.ethnic-ecommerce-hero__title {
		max-width: 100%;
		font-size: clamp(36px, 10vw, 52px);
	}

	.ethnic-ecommerce-heading__title,
	.ethnic-ecommerce-cta h2 {
		font-size: clamp(28px, 8vw, 38px);
	}

	.ethnic-ecommerce-button {
		width: 100%;
	}

	.ethnic-ecommerce-hero__points,
	.ethnic-ecommerce-card-grid--overview,
	.ethnic-ecommerce-card-grid--platforms,
	.ethnic-ecommerce-card-grid--models,
	.ethnic-ecommerce-card-grid--integrations,
	.ethnic-ecommerce-card-grid--support,
	.ethnic-ecommerce-card-grid--case-studies,
	.ethnic-ecommerce-dashboard__cards,
	.ethnic-ecommerce-cta__highlights,
	.ethnic-ecommerce-visual__catalog {
		grid-template-columns: 1fr;
	}

	.ethnic-ecommerce-card,
	.ethnic-ecommerce-platform-card,
	.ethnic-ecommerce-model-card,
	.ethnic-ecommerce-integration-card,
	.ethnic-ecommerce-support-card,
	.ethnic-ecommerce-case-card,
	.ethnic-ecommerce-dashboard,
	.ethnic-ecommerce-faq__item,
	.ethnic-ecommerce-cta,
	.ethnic-ecommerce-cta__panel {
		border-radius: 24px;
	}

	.ethnic-ecommerce-visual {
		min-height: auto;
	}

	.ethnic-ecommerce-visual__window {
		padding: 18px;
	}

	.ethnic-ecommerce-visual__window-body {
		padding: 14px;
	}

	.ethnic-ecommerce-visual__hero-card {
		grid-template-columns: 1fr;
	}

	.ethnic-ecommerce-visual__product-shot {
		min-height: 160px;
	}

	.ethnic-ecommerce-visual__floating {
		position: static;
		width: 100%;
		margin-top: 16px;
	}

	.ethnic-ecommerce-faq__item summary {
		padding: 20px 22px;
		font-size: 17px;
	}

	.ethnic-ecommerce-faq__answer {
		padding: 0 22px 20px;
	}

	.ethnic-ecommerce-section--contrast {
		padding: 40px 0;
		border-radius: 28px;
	}

	.ethnic-ecommerce-cta__intro {
		gap: 10px;
	}

	.ethnic-ecommerce-cta__panel {
		padding: 24px 22px;
	}

	.ethnic-ecommerce-cta__step {
		grid-template-columns: 44px 1fr;
		gap: 14px;
	}

	.ethnic-ecommerce-cta__step-number,
	.ethnic-ecommerce-dashboard__journey-step span {
		width: 44px;
		height: 44px;
		border-radius: 15px;
	}
}
CSS;
	}
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_body_class' ) ) {
	function ethnic_ecommerce_development_page_body_class( $classes ) {
		if ( ethnic_ecommerce_development_page_is_target() ) {
			$classes[] = 'ethnic-ecommerce-development-target';
		}

		return $classes;
	}

	add_filter( 'body_class', 'ethnic_ecommerce_development_page_body_class' );
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_print_head_assets' ) ) {
	function ethnic_ecommerce_development_page_print_head_assets() {
		if ( ! ethnic_ecommerce_development_page_is_target() ) {
			return;
		}

		$data = ethnic_ecommerce_development_page_data();
		?>
		<style id="ethnic-ecommerce-development-page-inline-css" type="text/css">
			<?php echo ethnic_ecommerce_development_page_styles(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
		</style>
		<meta name="description" content="<?php echo esc_attr( $data['metaDescription'] ); ?>" />
		<?php
	}

	add_action( 'wp_head', 'ethnic_ecommerce_development_page_print_head_assets', 120 );
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_document_title' ) ) {
	function ethnic_ecommerce_development_page_document_title( $title ) {
		if ( ethnic_ecommerce_development_page_is_target() ) {
			$data = ethnic_ecommerce_development_page_data();
			return $data['metaTitle'];
		}

		return $title;
	}

	add_filter( 'pre_get_document_title', 'ethnic_ecommerce_development_page_document_title', 50 );
}

if ( ! function_exists( 'ethnic_ecommerce_development_page_replace_content' ) ) {
	function ethnic_ecommerce_development_page_replace_content( $content ) {
		if ( ! ethnic_ecommerce_development_page_is_target() || ! in_the_loop() || ! is_main_query() ) {
			return $content;
		}

		static $rendered = false;

		if ( $rendered ) {
			return $content;
		}

		$rendered = true;

		return ethnic_ecommerce_development_page_render();
	}

	add_filter( 'the_content', 'ethnic_ecommerce_development_page_replace_content', 1000 );
}