File: /var/www/html/wp-content/mu-plugins/ethnic-adobe-commerce-development-page.php
<?php
/**
* Plugin Name: Ethnic Adobe Commerce Development Page
* Description: Creates and renders the Adobe Commerce Development sub-service page under eCommerce Development Services.
* Version: 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_parent_id' ) ) {
function ethnic_adobe_commerce_page_parent_id() {
static $parent_id = null;
if ( null !== $parent_id ) {
return $parent_id;
}
$page = get_page_by_path( 'services/ecommerce-development' );
if ( $page instanceof WP_Post ) {
$parent_id = (int) $page->ID;
} else {
$fallback = get_page_by_path( 'ecommerce-development' );
$parent_id = $fallback instanceof WP_Post ? (int) $fallback->ID : 0;
}
return $parent_id;
}
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_get_target_page' ) ) {
function ethnic_adobe_commerce_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/adobe-commerce-development' );
if ( ! ( $page instanceof WP_Post ) ) {
$fallback = get_page_by_path( 'adobe-commerce-development' );
if ( $fallback instanceof WP_Post && (int) $fallback->post_parent === ethnic_adobe_commerce_page_parent_id() ) {
$page = $fallback;
}
}
return $page instanceof WP_Post ? $page : null;
}
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_ensure_page' ) ) {
function ethnic_adobe_commerce_page_ensure_page() {
static $did_run = false;
if ( $did_run ) {
return;
}
$did_run = true;
$parent_id = ethnic_adobe_commerce_page_parent_id();
if ( ! $parent_id ) {
return;
}
$postarr = array(
'post_type' => 'page',
'post_title' => 'Adobe Commerce Development',
'post_name' => 'adobe-commerce-development',
'post_parent' => $parent_id,
'post_status' => 'publish',
'post_content' => '',
'comment_status' => 'closed',
'ping_status' => 'closed',
);
$page = get_page_by_path( 'services/ecommerce-development/adobe-commerce-development' );
if ( $page instanceof WP_Post ) {
$needs_update = 'Adobe Commerce Development' !== $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( 'adobe-commerce-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_adobe_commerce_page_ensure_page', 5 );
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_is_target' ) ) {
function ethnic_adobe_commerce_page_is_target() {
if ( is_admin() ) {
return false;
}
$page = ethnic_adobe_commerce_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_adobe_commerce_page_url' ) ) {
function ethnic_adobe_commerce_page_url( $path ) {
return home_url( '/' . ltrim( (string) $path, '/' ) . '/' );
}
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_contact_url' ) ) {
function ethnic_adobe_commerce_page_contact_url( $args = array() ) {
return ethnic_consultation_route_contact_url( $args, ethnic_adobe_commerce_page_url( 'contact-us' ) );
}
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_data' ) ) {
function ethnic_adobe_commerce_page_data() {
static $data = null;
if ( null !== $data ) {
return $data;
}
$data = array(
'metaTitle' => 'Adobe Commerce Development Services | Enterprise Strategy, B2B Workflows & Support',
'metaDescription' => 'Looking for Adobe Commerce development services? We deliver enterprise commerce strategy, advanced architecture, multi-store setups, B2B workflows, custom features, and long-term support.',
'heroTitle' => 'Adobe Commerce Development',
'heroText' => 'We build scalable, enterprise-grade Adobe Commerce solutions for complex commerce operations, international growth, and long-term digital transformation across multi-brand, multi-region, and B2B commerce environments.',
'heroPoints' => array(
'Enterprise Adobe Commerce expertise',
'Advanced architecture and B2B workflows',
'Long-term optimization and support',
),
'overviewParagraphs' => array(
'Our Adobe Commerce development services support enterprise merchants, complex B2B operations, and growing multi-brand businesses that need more than a standard storefront setup. We help shape Adobe Commerce implementations around catalog scale, operational workflows, customer structures, and the commercial goals that influence platform direction over time.',
'That includes new implementations, enterprise commerce strategy, architecture planning, platform modernization, multi-store Adobe Commerce setup, and feature expansion. We focus on scalability, operational flexibility, integration readiness, and performance so the platform supports both customer experience and internal execution.',
'From strategy and implementation to long-term platform growth, we help businesses use Adobe Commerce as a flexible commerce foundation for international expansion, advanced business rules, and more complex enterprise workflows.',
),
'overviewFeatures' => array(
array(
'icon' => 'compass',
'title' => 'Enterprise Commerce Strategy',
'copy' => 'Platform direction aligned to business goals, customer types, expansion plans, and operational priorities.',
),
array(
'icon' => 'layers',
'title' => 'Scalable Technical Architecture',
'copy' => 'Architecture decisions shaped around multi-store complexity, integrations, extensibility, and long-term scale.',
),
array(
'icon' => 'workflow',
'title' => 'Complex Workflow Support',
'copy' => 'Support for advanced commerce logic, regional variation, B2B requirements, and business-specific processes.',
),
array(
'icon' => 'growth',
'title' => 'Long-Term Platform Partnership',
'copy' => 'Ongoing guidance, support, optimization, and roadmap delivery as the platform evolves.',
),
),
'strategyParagraphs' => array(
'Enterprise commerce strategy is about more than choosing a platform. We help align Adobe Commerce implementation with business goals, operational requirements, customer complexity, and the expansion plans that influence how the commerce ecosystem should be structured.',
'That means planning around catalog scale, account structures, internal processes, regional requirements, and long-term feature growth so the platform supports customer experience and operational control at the same time.',
),
'strategyCards' => array(
array(
'icon' => 'roadmap',
'title' => 'Commerce roadmap planning',
'copy' => 'Map platform direction around implementation phases, growth milestones, and evolving business needs.',
),
array(
'icon' => 'briefcase',
'title' => 'Business model alignment',
'copy' => 'Shape Adobe Commerce around how the business sells, fulfills, and manages customer relationships.',
),
array(
'icon' => 'workflow',
'title' => 'Enterprise workflow mapping',
'copy' => 'Account for the operational logic, approvals, teams, and internal processes behind enterprise commerce delivery.',
),
array(
'icon' => 'foundation',
'title' => 'Scalable digital commerce foundations',
'copy' => 'Plan for platform structure that can support more catalogs, regions, teams, and customer segments over time.',
),
array(
'icon' => 'growth',
'title' => 'Long-term growth planning',
'copy' => 'Keep architecture, workflows, and customer experience aligned with future commercial expansion.',
),
),
'architectureParagraphs' => array(
'Adobe Commerce architecture needs to support more than the current storefront. We plan modular, scalable, and integration-ready implementations that can handle growing catalogs, custom workflows, operational systems, and future feature development without turning the platform into a maintenance burden.',
'The goal is to create an enterprise-ready architecture that balances extensibility, performance, and operational flexibility while still keeping the platform maintainable over time.',
),
'architectureCards' => array(
array(
'icon' => 'layers',
'title' => 'Scalable commerce architecture',
'copy' => 'Platform structure designed for growth across stores, catalogs, customer segments, and operational scope.',
),
array(
'icon' => 'api',
'title' => 'Integration-ready backend structure',
'copy' => 'Support clean connections between Adobe Commerce and the wider business system landscape.',
),
array(
'icon' => 'module',
'title' => 'Extensible custom feature support',
'copy' => 'Create room for business-specific functionality without making the platform harder to evolve.',
),
array(
'icon' => 'speed',
'title' => 'Performance-aware implementation',
'copy' => 'Technical planning that supports storefront responsiveness, operational efficiency, and platform stability.',
),
array(
'icon' => 'workflow',
'title' => 'Enterprise-grade operational flexibility',
'copy' => 'Architecture that supports more complex workflows, internal processes, and commerce business rules.',
),
),
'multiStoreParagraphs' => array(
'Multi-store and multi-region Adobe Commerce setups need careful planning around content, catalog variation, pricing, operational control, and the way brands or regional teams manage the platform. We help businesses structure Adobe Commerce so expansion does not create unnecessary operational friction later.',
'That can include multiple storefronts, brand variations, region-specific experiences, and centralized management models that preserve local flexibility where needed.',
),
'multiStoreCards' => array(
array(
'icon' => 'store',
'title' => 'Multi-store storefront management',
'copy' => 'Support multiple storefronts from one broader platform model while preserving operational clarity.',
),
array(
'icon' => 'brands',
'title' => 'Multi-brand commerce structures',
'copy' => 'Plan Adobe Commerce around portfolio-level brand variations, content differences, and merchandising needs.',
),
array(
'icon' => 'globe',
'title' => 'Region-specific experience support',
'copy' => 'Adapt content, pricing, merchandising, and customer experience to regional or market-specific requirements.',
),
array(
'icon' => 'dashboard',
'title' => 'Centralized operational control',
'copy' => 'Balance scale and governance with the flexibility required by different business units or markets.',
),
array(
'icon' => 'growth',
'title' => 'Scalable expansion planning',
'copy' => 'Create a multi-store Adobe Commerce setup that can support future geography, catalog, or brand expansion.',
),
),
'b2bParagraphs' => array(
'Adobe Commerce B2B workflows often sit at the center of more complex buying models. We help support company account structures, role-based access, quote and approval processes, customer-specific pricing, bulk ordering, and the internal sales processes that sit behind them.',
'The objective is to align the platform with enterprise purchasing behavior and operational reality rather than forcing B2B teams into consumer-style patterns that do not fit how they work.',
),
'b2bCards' => array(
array(
'icon' => 'briefcase',
'title' => 'Company account structures',
'description'=> 'Support account-based commerce experiences that reflect how enterprise customers organize teams, buyers, and permissions.',
'items' => array(
'Company accounts and hierarchy logic',
'Role-based access flows',
'Internal team and purchaser permissions',
),
),
array(
'icon' => 'approval',
'title' => 'Quote and approval processes',
'description'=> 'Build B2B purchasing flows around negotiated buying, approvals, and more deliberate order progression.',
'items' => array(
'Quote workflows',
'Approval paths and decision checkpoints',
'Internal sales workflow alignment',
),
),
array(
'icon' => 'pricing',
'title' => 'Customer-specific pricing and ordering',
'description'=> 'Support tailored commerce logic for customers with different pricing, catalogs, and operational buying patterns.',
'items' => array(
'Customer-specific catalogs and pricing',
'Bulk ordering support',
'Operational flexibility for repeat B2B purchasing',
),
),
),
'customParagraphs' => array(
'Custom Adobe Commerce development is often necessary when enterprise requirements go beyond the standard feature set. We build maintainable custom features for customer journeys, admin workflows, catalog behavior, promotional rules, operational processes, and the business-specific logic that helps large commerce environments run more effectively.',
'The emphasis stays on clean implementation, maintainability, and scalable extension patterns so custom functionality supports growth rather than creating unnecessary future limitations.',
),
'customCards' => array(
array(
'icon' => 'cart',
'title' => 'Custom checkout features',
'copy' => 'Extend checkout logic when enterprise workflows, customer rules, or buying models require more deliberate control.',
),
array(
'icon' => 'dashboard',
'title' => 'Admin workflow enhancements',
'copy' => 'Improve internal efficiency through more tailored admin tools, status logic, and business process support.',
),
array(
'icon' => 'grid',
'title' => 'Catalog and pricing logic',
'copy' => 'Support product complexity, pricing conditions, and catalog rules that reflect real enterprise commerce needs.',
),
array(
'icon' => 'promotions',
'title' => 'Promotion and merchandising rules',
'copy' => 'Create more flexible campaign, pricing, and merchandising behavior for sophisticated commerce programs.',
),
array(
'icon' => 'module',
'title' => 'Business-specific commerce features',
'copy' => 'Build unique Adobe Commerce functionality when out-of-the-box features do not fully support the model.',
),
array(
'icon' => 'workflow',
'title' => 'Operational workflow extensions',
'copy' => 'Extend the platform to better support internal teams, approvals, fulfillment steps, and reporting needs.',
),
),
'supportCards' => array(
array(
'label' => 'Platform Maintenance',
'icon' => 'shield',
'title' => 'Stability and issue resolution for enterprise Adobe Commerce environments',
'description' => 'Keep the platform reliable through structured maintenance, version compatibility work, and issue handling.',
'items' => array(
'Issue resolution and platform stability support',
'Version and compatibility updates',
'Ongoing maintenance for platform continuity',
),
),
array(
'label' => 'Optimization & Enhancements',
'icon' => 'speed',
'title' => 'Performance improvement and feature enhancement support',
'description' => 'Support better commerce outcomes through performance work, feature delivery, and workflow refinement.',
'items' => array(
'Performance improvements and monitoring',
'Feature development and enhancement work',
'Workflow refinements across storefront and operations',
),
),
array(
'label' => 'Strategic Long-Term Support',
'icon' => 'compass',
'title' => 'Long-term Adobe Commerce partnership for enterprise platform growth',
'description' => 'Support the platform roadmap, integration evolution, and the technical direction needed for larger commerce programs.',
'items' => array(
'Platform roadmap execution',
'Integration evolution and ongoing platform change',
'Ongoing enterprise commerce partnership',
),
),
),
'ctaTitle' => 'Looking for Adobe Commerce Development Services?',
'ctaText' => 'Discuss enterprise commerce strategy, multi-store setups, B2B requirements, custom Adobe Commerce development, advanced architecture, or long-term platform support with a team that understands complex commerce delivery.',
'ctaHighlights' => array(
'Enterprise Adobe Commerce development services shaped around scale and flexibility',
'Advanced architecture, B2B workflows, multi-store setups, and custom features',
'Long-term optimization, platform support, and enterprise growth planning',
),
'ctaSteps' => array(
array(
'title' => 'Share your commerce goals',
'copy' => 'Tell us about your brands, regions, B2B requirements, operational complexity, and enterprise platform priorities.',
),
array(
'title' => 'Review the right Adobe Commerce path',
'copy' => 'We help map strategy, architecture direction, workflow scope, and the best implementation model for the business.',
),
array(
'title' => 'Move into planning',
'copy' => 'Leave with clearer next steps for implementation, optimization, multi-store rollout, or long-term platform growth.',
),
),
);
return $data;
}
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_heading' ) ) {
function ethnic_adobe_commerce_page_heading( $eyebrow, $title, $copy = '' ) {
ob_start();
?>
<div class="ethnic-adobe-commerce-heading">
<?php if ( $eyebrow ) : ?>
<p class="ethnic-adobe-commerce-heading__eyebrow"><?php echo esc_html( $eyebrow ); ?></p>
<?php endif; ?>
<h2 class="ethnic-adobe-commerce-heading__title"><?php echo esc_html( $title ); ?></h2>
<?php if ( $copy ) : ?>
<p class="ethnic-adobe-commerce-heading__copy"><?php echo esc_html( $copy ); ?></p>
<?php endif; ?>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_icon' ) ) {
function ethnic_adobe_commerce_page_icon( $icon ) {
ob_start();
switch ( $icon ) {
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 '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 'workflow':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3.8" y="5" width="6.4" height="4.8" rx="1.1" />
<rect x="13.8" y="5" width="6.4" height="4.8" rx="1.1" />
<rect x="8.8" y="14.2" width="6.4" height="4.8" rx="1.1" />
<path d="M10.2 7.4h3.6" />
<path d="M12 9.8v4.4" />
</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 'roadmap':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M5 18.5V5.2h10.6l3.4 3.4v9.9z" />
<path d="M15.6 5.2v3.4H19" />
<path d="M8 10.2h8" />
<path d="M8 14h6" />
</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 'foundation':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4.5 18.5h15" />
<path d="M6.5 18.5V9.8l5.5-3 5.5 3v8.7" />
<path d="M9.2 18.5v-4.2h5.6v4.2" />
</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 'module':
?>
<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="9" y="14" width="6" height="6" rx="1.2" />
<path d="M10 7h4" />
<path d="M12 10v4" />
</svg>
<?php
break;
case 'speed':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M6 16a8 8 0 1 1 12 0" />
<path d="M12 12l4.2-2.2" />
<path d="M12 20v-2.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 'brands':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="4" y="6" width="6.2" height="12" rx="1.3" />
<rect x="13.8" y="4.8" width="6.2" height="14.4" rx="1.3" />
<path d="M6.2 9h1.8" />
<path d="M16 8.2h1.8" />
</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 'dashboard':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<rect x="3.8" y="4.5" width="16.4" height="15" rx="2" />
<path d="M3.8 9.2h16.4" />
<path d="M8.8 13.2h2.4" />
<path d="M13.4 13.2h2.4" />
<path d="M8.8 16.4h7" />
</svg>
<?php
break;
case 'approval':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M5.2 6.2h9.2l3.6 3.6v8H5.2z" />
<path d="M14.4 6.2v3.6H18" />
<path d="m8.2 14.2 1.8 1.8 3.8-4" />
</svg>
<?php
break;
case 'pricing':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M12 4.2c4.5 0 7.8 2.1 7.8 4.8s-3.3 4.8-7.8 4.8S4.2 11.7 4.2 9s3.3-4.8 7.8-4.8z" />
<path d="M4.2 9v5.8c0 2.7 3.3 4.8 7.8 4.8s7.8-2.1 7.8-4.8V9" />
<path d="M12 8v8" />
</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 '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 'promotions':
?>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7.2 5.2h9.6l2 4-7 9.6-7-9.6z" />
<path d="M9.8 5.2 12 9.4l2.2-4.2" />
</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;
}
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_render' ) ) {
function ethnic_adobe_commerce_page_render() {
$data = ethnic_adobe_commerce_page_data();
$consultation_url = ethnic_adobe_commerce_page_contact_url(
array(
'intent' => 'consultation',
'service' => 'adobe-commerce-development',
)
);
$team_url = ethnic_adobe_commerce_page_contact_url(
array(
'intent' => 'team',
'service' => 'adobe-commerce-development',
)
);
$quote_url = ethnic_adobe_commerce_page_contact_url(
array(
'intent' => 'quote',
'service' => 'adobe-commerce-development',
)
);
ob_start();
?>
<div class="ethnic-adobe-commerce-page">
<section class="ethnic-adobe-commerce-section ethnic-adobe-commerce-section--hero">
<div class="ethnic-adobe-commerce-shell">
<div class="ethnic-adobe-commerce-hero">
<div class="ethnic-adobe-commerce-hero__copy">
<p class="ethnic-adobe-commerce-kicker">Enterprise Adobe Commerce</p>
<h1 class="ethnic-adobe-commerce-hero__title"><?php echo esc_html( $data['heroTitle'] ); ?></h1>
<p class="ethnic-adobe-commerce-hero__lead"><?php echo esc_html( $data['heroText'] ); ?></p>
<div class="ethnic-adobe-commerce-actions">
<a class="ethnic-adobe-commerce-button ethnic-adobe-commerce-button--primary" href="<?php echo esc_url( $consultation_url ); ?>">Book a Free Consultation</a>
<a class="ethnic-adobe-commerce-button ethnic-adobe-commerce-button--secondary" href="<?php echo esc_url( $team_url ); ?>">Talk to Our Team</a>
</div>
<ul class="ethnic-adobe-commerce-hero__points" aria-label="Adobe Commerce service highlights">
<?php foreach ( (array) $data['heroPoints'] as $point ) : ?>
<li><?php echo esc_html( $point ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<div class="ethnic-adobe-commerce-hero__visual">
<div class="ethnic-adobe-commerce-visual">
<div class="ethnic-adobe-commerce-visual__window">
<div class="ethnic-adobe-commerce-visual__window-bar">
<span></span>
<span></span>
<span></span>
</div>
<div class="ethnic-adobe-commerce-visual__window-body">
<div class="ethnic-adobe-commerce-visual__toolbar">
<span>Multi-store</span>
<span>B2B Portal</span>
<span>Architecture</span>
</div>
<div class="ethnic-adobe-commerce-visual__feature">
<div class="ethnic-adobe-commerce-visual__feature-shot"></div>
<div class="ethnic-adobe-commerce-visual__feature-copy">
<span class="ethnic-adobe-commerce-visual__eyebrow">Enterprise storefront</span>
<strong>Adobe Commerce experiences structured for regional variation, B2B complexity, and long-term scale.</strong>
<p>Storefront flexibility, operational control, and enterprise workflow support built into the platform model from the start.</p>
<div class="ethnic-adobe-commerce-visual__tags">
<span>Multi-region UX</span>
<span>B2B flows</span>
<span>Scalable architecture</span>
</div>
</div>
</div>
<div class="ethnic-adobe-commerce-visual__panels">
<div class="ethnic-adobe-commerce-visual__panel">
<small>Region strategy</small>
<strong>Storefronts with local variation and centralized governance</strong>
</div>
<div class="ethnic-adobe-commerce-visual__panel">
<small>Operational model</small>
<strong>Admin dashboards, catalog control, and integration-aware workflows</strong>
</div>
</div>
</div>
</div>
<div class="ethnic-adobe-commerce-visual__floating ethnic-adobe-commerce-visual__floating--portal">
<p class="ethnic-adobe-commerce-visual__floating-label">B2B portal</p>
<strong>Company accounts, approvals, and customer-specific pricing support</strong>
<ul>
<li>Role-based access</li>
<li>Quote and approval flows</li>
<li>Bulk ordering support</li>
</ul>
</div>
<div class="ethnic-adobe-commerce-visual__floating ethnic-adobe-commerce-visual__floating--map">
<p class="ethnic-adobe-commerce-visual__floating-label">Architecture view</p>
<strong>Enterprise-ready structure for stores, regions, systems, and platform growth</strong>
<div class="ethnic-adobe-commerce-visual__metric-grid">
<div>
<small>Stores</small>
<strong>Flexible</strong>
</div>
<div>
<small>Systems</small>
<strong>Connected</strong>
</div>
</div>
<div class="ethnic-adobe-commerce-visual__progress">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-adobe-commerce-section" id="overview">
<div class="ethnic-adobe-commerce-shell">
<?php echo ethnic_adobe_commerce_page_heading( 'Service Overview', 'Adobe Commerce development services for enterprise merchants and complex commerce environments.', 'We support implementation, architecture planning, feature expansion, workflow design, and long-term platform growth for Adobe Commerce programs that need more scale and operational flexibility.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-adobe-commerce-overview">
<div class="ethnic-adobe-commerce-prose">
<?php foreach ( (array) $data['overviewParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-adobe-commerce-card-grid ethnic-adobe-commerce-card-grid--overview">
<?php foreach ( (array) $data['overviewFeatures'] as $feature ) : ?>
<article class="ethnic-adobe-commerce-card">
<div class="ethnic-adobe-commerce-card__icon">
<?php echo ethnic_adobe_commerce_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-adobe-commerce-section ethnic-adobe-commerce-section--soft" id="strategy">
<div class="ethnic-adobe-commerce-shell">
<div class="ethnic-adobe-commerce-split">
<div class="ethnic-adobe-commerce-split__content">
<?php echo ethnic_adobe_commerce_page_heading( 'Enterprise Commerce Strategy', 'Enterprise commerce strategy shaped around business goals, workflow complexity, and expansion plans.', 'We help businesses plan Adobe Commerce implementation around customer structures, catalog complexity, operational requirements, and long-term commercial growth instead of treating the platform as a generic storefront launch.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php foreach ( (array) $data['strategyParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-adobe-commerce-split__visual">
<div class="ethnic-adobe-commerce-panel">
<p class="ethnic-adobe-commerce-panel__eyebrow">Strategy Focus</p>
<div class="ethnic-adobe-commerce-panel__grid">
<?php foreach ( (array) $data['strategyCards'] as $card ) : ?>
<article class="ethnic-adobe-commerce-panel__card">
<div class="ethnic-adobe-commerce-card__icon">
<?php echo ethnic_adobe_commerce_page_icon( $card['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $card['title'] ); ?></h3>
<p><?php echo esc_html( $card['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-adobe-commerce-section" id="architecture">
<div class="ethnic-adobe-commerce-shell">
<?php echo ethnic_adobe_commerce_page_heading( 'Advanced Architecture', 'Architecture planning for enterprise Adobe Commerce implementation depth.', 'We support modular, scalable, and integration-ready architecture for Adobe Commerce programs that need to handle custom workflows, future feature growth, and larger commerce operations without losing maintainability.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-adobe-commerce-prose ethnic-adobe-commerce-prose--narrow">
<?php foreach ( (array) $data['architectureParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-adobe-commerce-card-grid ethnic-adobe-commerce-card-grid--architecture">
<?php foreach ( (array) $data['architectureCards'] as $card ) : ?>
<article class="ethnic-adobe-commerce-card ethnic-adobe-commerce-card--architecture">
<div class="ethnic-adobe-commerce-card__icon">
<?php echo ethnic_adobe_commerce_page_icon( $card['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $card['title'] ); ?></h3>
<p><?php echo esc_html( $card['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-adobe-commerce-section ethnic-adobe-commerce-section--soft" id="multi-store">
<div class="ethnic-adobe-commerce-shell">
<div class="ethnic-adobe-commerce-split ethnic-adobe-commerce-split--expansion">
<div class="ethnic-adobe-commerce-split__content">
<?php echo ethnic_adobe_commerce_page_heading( 'Multi-Store / Multi-Region Setup', 'Multi-store Adobe Commerce setup for brands, regions, and evolving market structures.', 'We help plan Adobe Commerce so multiple storefronts, brands, catalogs, regions, and localized experiences can operate with centralized control while still preserving the flexibility different teams and markets often need.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php foreach ( (array) $data['multiStoreParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-adobe-commerce-split__visual">
<div class="ethnic-adobe-commerce-card-grid ethnic-adobe-commerce-card-grid--expansion">
<?php foreach ( (array) $data['multiStoreCards'] as $card ) : ?>
<article class="ethnic-adobe-commerce-card ethnic-adobe-commerce-card--expansion">
<div class="ethnic-adobe-commerce-card__icon">
<?php echo ethnic_adobe_commerce_page_icon( $card['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $card['title'] ); ?></h3>
<p><?php echo esc_html( $card['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</section>
<section class="ethnic-adobe-commerce-section" id="b2b">
<div class="ethnic-adobe-commerce-shell">
<div class="ethnic-adobe-commerce-b2b">
<div class="ethnic-adobe-commerce-b2b__copy">
<?php echo ethnic_adobe_commerce_page_heading( 'B2B Workflows', 'Adobe Commerce B2B workflows built around enterprise buying behavior and operational control.', 'We help businesses support company accounts, role-based access, quote logic, approvals, customer-specific pricing, bulk ordering, and the internal processes that sit behind more advanced B2B commerce environments.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<?php foreach ( (array) $data['b2bParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-adobe-commerce-b2b__grid">
<?php foreach ( (array) $data['b2bCards'] as $card ) : ?>
<article class="ethnic-adobe-commerce-card ethnic-adobe-commerce-card--b2b">
<div class="ethnic-adobe-commerce-card__icon">
<?php echo ethnic_adobe_commerce_page_icon( $card['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $card['title'] ); ?></h3>
<p><?php echo esc_html( $card['description'] ); ?></p>
<ul class="ethnic-adobe-commerce-checklist">
<?php foreach ( (array) $card['items'] as $item ) : ?>
<li><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
</article>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
<section class="ethnic-adobe-commerce-section ethnic-adobe-commerce-section--soft" id="custom-features">
<div class="ethnic-adobe-commerce-shell">
<?php echo ethnic_adobe_commerce_page_heading( 'Custom Features', 'Custom Adobe Commerce development for business-specific requirements.', 'We extend Adobe Commerce beyond standard functionality when enterprise customer journeys, admin workflows, catalog logic, promotional behavior, or operational needs require cleaner custom implementation.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-adobe-commerce-prose ethnic-adobe-commerce-prose--narrow">
<?php foreach ( (array) $data['customParagraphs'] as $paragraph ) : ?>
<p><?php echo esc_html( $paragraph ); ?></p>
<?php endforeach; ?>
</div>
<div class="ethnic-adobe-commerce-card-grid ethnic-adobe-commerce-card-grid--custom">
<?php foreach ( (array) $data['customCards'] as $card ) : ?>
<article class="ethnic-adobe-commerce-card ethnic-adobe-commerce-card--custom">
<div class="ethnic-adobe-commerce-card__icon">
<?php echo ethnic_adobe_commerce_page_icon( $card['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $card['title'] ); ?></h3>
<p><?php echo esc_html( $card['copy'] ); ?></p>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-adobe-commerce-section" id="support">
<div class="ethnic-adobe-commerce-shell">
<?php echo ethnic_adobe_commerce_page_heading( 'Long-Term Support', 'Long-term Adobe Commerce support for stability, optimization, and enterprise platform growth.', 'We support maintenance, version compatibility, performance work, feature enhancements, integration evolution, and ongoing enterprise commerce partnership after the initial implementation is live.' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
<div class="ethnic-adobe-commerce-card-grid ethnic-adobe-commerce-card-grid--support">
<?php foreach ( (array) $data['supportCards'] as $card ) : ?>
<article class="ethnic-adobe-commerce-card ethnic-adobe-commerce-card--support">
<p class="ethnic-adobe-commerce-card__label"><?php echo esc_html( $card['label'] ); ?></p>
<div class="ethnic-adobe-commerce-card__icon">
<?php echo ethnic_adobe_commerce_page_icon( $card['icon'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<h3><?php echo esc_html( $card['title'] ); ?></h3>
<p><?php echo esc_html( $card['description'] ); ?></p>
<ul class="ethnic-adobe-commerce-checklist">
<?php foreach ( (array) $card['items'] as $item ) : ?>
<li><?php echo esc_html( $item ); ?></li>
<?php endforeach; ?>
</ul>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="ethnic-adobe-commerce-section ethnic-adobe-commerce-section--cta" id="cta">
<div class="ethnic-adobe-commerce-shell">
<div class="ethnic-adobe-commerce-cta">
<div class="ethnic-adobe-commerce-cta__copy">
<div class="ethnic-adobe-commerce-cta__intro">
<p class="ethnic-adobe-commerce-kicker ethnic-adobe-commerce-kicker--light">Ready to Talk</p>
<p class="ethnic-adobe-commerce-cta__note">Planning for enterprise commerce strategy, Adobe Commerce architecture, B2B workflows, and long-term support.</p>
</div>
<h2><?php echo esc_html( $data['ctaTitle'] ); ?></h2>
<p class="ethnic-adobe-commerce-cta__lead"><?php echo esc_html( $data['ctaText'] ); ?></p>
<div class="ethnic-adobe-commerce-actions">
<a class="ethnic-adobe-commerce-button ethnic-adobe-commerce-button--primary" href="<?php echo esc_url( $team_url ); ?>">Talk to Our Team</a>
<a class="ethnic-adobe-commerce-button ethnic-adobe-commerce-button--secondary" href="<?php echo esc_url( $quote_url ); ?>">Get a Free Quote</a>
</div>
<ul class="ethnic-adobe-commerce-cta__highlights" aria-label="Adobe Commerce CTA highlights">
<?php foreach ( (array) $data['ctaHighlights'] as $highlight ) : ?>
<li><?php echo esc_html( $highlight ); ?></li>
<?php endforeach; ?>
</ul>
</div>
<aside class="ethnic-adobe-commerce-cta__panel" aria-label="What happens next">
<div class="ethnic-adobe-commerce-cta__panel-header">
<p class="ethnic-adobe-commerce-cta__panel-eyebrow">What Happens Next</p>
<h3 class="ethnic-adobe-commerce-cta__panel-title">Plan the right enterprise Adobe Commerce path</h3>
</div>
<ol class="ethnic-adobe-commerce-cta__steps">
<?php foreach ( (array) $data['ctaSteps'] as $index => $step ) : ?>
<li class="ethnic-adobe-commerce-cta__step">
<span class="ethnic-adobe-commerce-cta__step-number"><?php echo esc_html( sprintf( '%02d', $index + 1 ) ); ?></span>
<div class="ethnic-adobe-commerce-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-adobe-commerce-cta__panel-note"><strong>Focus:</strong> enterprise commerce strategy, architecture planning, multi-store support, B2B workflows, and long-term Adobe Commerce growth.</div>
</aside>
</div>
</div>
</section>
</div>
<?php
return ob_get_clean();
}
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_styles' ) ) {
function ethnic_adobe_commerce_page_styles() {
return <<<'CSS'
body.ethnic-adobe-commerce-target #page-title.page-title-block.custom-page-title {
display: none;
}
body.ethnic-adobe-commerce-target .fullwidth-content > .ethnic-adobe-commerce-page {
padding-bottom: clamp(72px, 8vw, 120px);
}
body.ethnic-adobe-commerce-target .block-content > .container {
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}
body.ethnic-adobe-commerce-target .block-content > .container > .panel.row {
margin-left: 0;
margin-right: 0;
}
body.ethnic-adobe-commerce-target .block-content > .container > .panel > .panel-center {
width: 100%;
padding-left: 0;
padding-right: 0;
}
body.ethnic-adobe-commerce-target .entry-content.post-content {
margin-bottom: 0;
}
.ethnic-adobe-commerce-page {
--ethnic-adobe-commerce-text: #0f172a;
--ethnic-adobe-commerce-muted: #5d6d83;
--ethnic-adobe-commerce-border: rgba(15, 23, 42, 0.09);
--ethnic-adobe-commerce-surface-strong: #ffffff;
--ethnic-adobe-commerce-accent: #f25c05;
--ethnic-adobe-commerce-accent-dark: #9b3100;
--ethnic-adobe-commerce-lime: #e7ff89;
--ethnic-adobe-commerce-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
color: var(--ethnic-adobe-commerce-text);
overflow-x: clip;
}
.ethnic-adobe-commerce-page,
.ethnic-adobe-commerce-page *,
.ethnic-adobe-commerce-page *::before,
.ethnic-adobe-commerce-page *::after {
box-sizing: border-box;
}
.ethnic-adobe-commerce-shell {
width: min(1240px, calc(100% - (var(--ethnic-adobe-commerce-shell-padding, 36px) * 2)));
margin: 0 auto;
}
.ethnic-adobe-commerce-section + .ethnic-adobe-commerce-section {
margin-top: clamp(72px, 8vw, 112px);
}
.ethnic-adobe-commerce-section--soft {
padding: clamp(28px, 4vw, 36px) 0;
}
.ethnic-adobe-commerce-page p,
.ethnic-adobe-commerce-page li {
color: var(--ethnic-adobe-commerce-muted);
font-size: 16px;
line-height: 1.78;
}
.ethnic-adobe-commerce-kicker,
.ethnic-adobe-commerce-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-adobe-commerce-kicker::before,
.ethnic-adobe-commerce-heading__eyebrow::before,
.ethnic-adobe-commerce-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-adobe-commerce-kicker--light,
.ethnic-adobe-commerce-heading__eyebrow {
background: rgba(242, 92, 5, 0.1);
border-color: rgba(242, 92, 5, 0.16);
color: var(--ethnic-adobe-commerce-accent) !important;
-webkit-text-fill-color: var(--ethnic-adobe-commerce-accent);
}
.ethnic-adobe-commerce-heading {
max-width: 820px;
margin-bottom: clamp(28px, 4vw, 40px);
}
.ethnic-adobe-commerce-heading__title,
.ethnic-adobe-commerce-hero__title,
.ethnic-adobe-commerce-cta h2 {
margin: 0;
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-weight: 700;
letter-spacing: -0.05em;
text-wrap: balance;
}
.ethnic-adobe-commerce-heading__title,
.ethnic-adobe-commerce-cta h2 {
color: var(--ethnic-adobe-commerce-text);
font-size: clamp(32px, 3vw, 44px);
line-height: 1.06;
}
.ethnic-adobe-commerce-heading__copy,
.ethnic-adobe-commerce-prose p,
.ethnic-adobe-commerce-card p,
.ethnic-adobe-commerce-cta__lead,
.ethnic-adobe-commerce-cta__step-copy p {
margin: 18px 0 0;
}
.ethnic-adobe-commerce-prose--narrow {
max-width: 76ch;
}
.ethnic-adobe-commerce-section--hero {
position: relative;
background:
radial-gradient(circle at 16% 18%, rgba(242, 92, 5, 0.2), transparent 24%),
radial-gradient(circle at 82% 16%, rgba(47, 107, 255, 0.16), transparent 20%),
linear-gradient(180deg, #091328, #10263f 54%, #15324f);
}
.ethnic-adobe-commerce-section--hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 36px 36px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.36), transparent 80%);
pointer-events: none;
}
.ethnic-adobe-commerce-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 0.96fr);
gap: clamp(32px, 5vw, 68px);
align-items: center;
min-height: clamp(600px, 72vw, 760px);
padding: clamp(82px, 8vw, 128px) 0;
}
.ethnic-adobe-commerce-hero__copy,
.ethnic-adobe-commerce-hero__visual {
position: relative;
z-index: 1;
}
.ethnic-adobe-commerce-hero__title {
max-width: 9ch;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff;
font-size: clamp(44px, 5.2vw, 72px);
line-height: 0.98;
}
.ethnic-adobe-commerce-hero__lead {
max-width: 61ch;
margin: 20px 0 0;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(17px, 1.45vw, 20px);
line-height: 1.82;
}
.ethnic-adobe-commerce-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
.ethnic-adobe-commerce-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-adobe-commerce-button:hover,
.ethnic-adobe-commerce-button:focus-visible {
transform: translateY(-1px);
text-decoration: none;
}
.ethnic-adobe-commerce-button--primary {
background: var(--ethnic-adobe-commerce-lime);
color: #0b1730 !important;
box-shadow: 0 20px 44px rgba(5, 14, 28, 0.24);
}
.ethnic-adobe-commerce-button--primary:hover,
.ethnic-adobe-commerce-button--primary:focus-visible {
background: #f1ffb7;
color: #0b1730 !important;
box-shadow: 0 24px 50px rgba(5, 14, 28, 0.28);
}
.ethnic-adobe-commerce-button--secondary {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.16);
color: #ffffff !important;
}
.ethnic-adobe-commerce-hero__points,
.ethnic-adobe-commerce-checklist,
.ethnic-adobe-commerce-cta__highlights {
display: grid;
gap: 12px;
padding: 0;
margin: 26px 0 0;
list-style: none;
}
.ethnic-adobe-commerce-hero__points {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 860px;
}
.ethnic-adobe-commerce-hero__points li,
.ethnic-adobe-commerce-checklist li,
.ethnic-adobe-commerce-cta__highlights li {
position: relative;
padding-left: 22px;
}
.ethnic-adobe-commerce-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-adobe-commerce-hero__points li::before,
.ethnic-adobe-commerce-checklist li::before,
.ethnic-adobe-commerce-cta__highlights li::before {
content: "";
position: absolute;
left: 0;
top: 0.38em;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--ethnic-adobe-commerce-lime);
box-shadow: 0 0 0 5px rgba(231, 255, 137, 0.16);
}
.ethnic-adobe-commerce-hero__points li::before {
left: 18px;
top: 20px;
}
.ethnic-adobe-commerce-visual {
position: relative;
min-height: 580px;
}
.ethnic-adobe-commerce-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-adobe-commerce-visual__window-bar {
display: flex;
gap: 10px;
margin-bottom: 18px;
}
.ethnic-adobe-commerce-visual__window-bar span {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.52);
}
.ethnic-adobe-commerce-visual__window-body {
padding: 18px;
border-radius: 26px;
background:
radial-gradient(circle at top right, rgba(242, 92, 5, 0.14), 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-adobe-commerce-visual__toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}
.ethnic-adobe-commerce-visual__toolbar span,
.ethnic-adobe-commerce-visual__tags span {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(242, 92, 5, 0.1);
color: var(--ethnic-adobe-commerce-accent-dark);
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.ethnic-adobe-commerce-visual__feature {
display: grid;
grid-template-columns: minmax(118px, 0.72fr) minmax(0, 1fr);
gap: 18px;
padding: 18px;
border-radius: 24px;
background: var(--ethnic-adobe-commerce-surface-strong);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.ethnic-adobe-commerce-visual__feature-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(242, 92, 5, 0.18), rgba(47, 107, 255, 0.08)),
linear-gradient(180deg, #eff6ff, #ffe9dd);
position: relative;
overflow: hidden;
}
.ethnic-adobe-commerce-visual__feature-shot::before,
.ethnic-adobe-commerce-visual__feature-shot::after {
content: "";
position: absolute;
border-radius: 18px;
}
.ethnic-adobe-commerce-visual__feature-shot::before {
inset: 16px;
background: linear-gradient(180deg, #ffffff, #fff2ea);
border: 1px solid rgba(242, 92, 5, 0.14);
}
.ethnic-adobe-commerce-visual__feature-shot::after {
left: 34px;
right: 34px;
bottom: 24px;
height: 42px;
background: rgba(242, 92, 5, 0.14);
}
.ethnic-adobe-commerce-visual__eyebrow,
.ethnic-adobe-commerce-panel__eyebrow,
.ethnic-adobe-commerce-card__label,
.ethnic-adobe-commerce-cta__note,
.ethnic-adobe-commerce-visual__floating-label {
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-adobe-commerce-visual__feature-copy strong,
.ethnic-adobe-commerce-cta__step-copy strong {
display: block;
margin: 0;
color: var(--ethnic-adobe-commerce-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 1.35;
}
.ethnic-adobe-commerce-visual__eyebrow {
margin-bottom: 8px;
color: var(--ethnic-adobe-commerce-accent);
}
.ethnic-adobe-commerce-visual__feature-copy p {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.7;
}
.ethnic-adobe-commerce-visual__tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.ethnic-adobe-commerce-visual__panels {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 16px;
}
.ethnic-adobe-commerce-visual__panel {
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-adobe-commerce-visual__panel small,
.ethnic-adobe-commerce-visual__metric-grid 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-adobe-commerce-visual__panel strong,
.ethnic-adobe-commerce-visual__floating strong {
display: block;
margin-top: 8px;
color: var(--ethnic-adobe-commerce-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.42;
}
.ethnic-adobe-commerce-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-adobe-commerce-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-adobe-commerce-visual__floating ul {
display: grid;
gap: 10px;
padding: 0;
margin: 14px 0 0;
list-style: none;
}
.ethnic-adobe-commerce-visual__floating li {
position: relative;
padding-left: 18px;
font-size: 14px;
line-height: 1.6;
}
.ethnic-adobe-commerce-visual__floating li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ethnic-adobe-commerce-accent);
box-shadow: 0 0 0 4px rgba(242, 92, 5, 0.12);
}
.ethnic-adobe-commerce-visual__floating--portal {
right: -14px;
bottom: 22px;
width: min(320px, 100%);
}
.ethnic-adobe-commerce-visual__floating--map {
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, #3a190d, #4b1e10);
border-color: rgba(255, 255, 255, 0.1);
}
.ethnic-adobe-commerce-visual__floating--map .ethnic-adobe-commerce-visual__floating-label,
.ethnic-adobe-commerce-visual__floating--map strong,
.ethnic-adobe-commerce-visual__floating--map small {
color: #ffffff;
}
.ethnic-adobe-commerce-visual__metric-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}
.ethnic-adobe-commerce-visual__metric-grid div {
padding: 14px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
}
.ethnic-adobe-commerce-visual__metric-grid strong {
font-size: 16px;
}
.ethnic-adobe-commerce-visual__progress {
display: grid;
gap: 8px;
margin-top: 16px;
}
.ethnic-adobe-commerce-visual__progress span {
display: block;
height: 10px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(231, 255, 137, 0.9), rgba(242, 92, 5, 0.9));
}
.ethnic-adobe-commerce-visual__progress span:nth-child(2) {
width: 82%;
}
.ethnic-adobe-commerce-visual__progress span:nth-child(3) {
width: 68%;
}
.ethnic-adobe-commerce-overview,
.ethnic-adobe-commerce-split,
.ethnic-adobe-commerce-b2b {
display: grid;
grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
gap: clamp(28px, 4vw, 48px);
align-items: start;
}
.ethnic-adobe-commerce-card-grid {
display: grid;
gap: 20px;
}
.ethnic-adobe-commerce-card-grid--overview {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-adobe-commerce-card,
.ethnic-adobe-commerce-panel,
.ethnic-adobe-commerce-cta {
border-radius: 28px;
border: 1px solid var(--ethnic-adobe-commerce-border);
box-shadow: var(--ethnic-adobe-commerce-shadow);
}
.ethnic-adobe-commerce-card,
.ethnic-adobe-commerce-panel {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.96)),
var(--ethnic-adobe-commerce-surface-strong);
}
.ethnic-adobe-commerce-card {
padding: 24px;
}
.ethnic-adobe-commerce-card__icon {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 16px;
background: rgba(242, 92, 5, 0.1);
color: var(--ethnic-adobe-commerce-accent);
}
.ethnic-adobe-commerce-card__icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.ethnic-adobe-commerce-card h3 {
margin: 18px 0 0;
color: var(--ethnic-adobe-commerce-text);
font-family: "Plus Jakarta Sans", "Figtree", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
}
.ethnic-adobe-commerce-panel {
padding: 26px;
}
.ethnic-adobe-commerce-panel__eyebrow {
margin-bottom: 18px;
}
.ethnic-adobe-commerce-panel__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.ethnic-adobe-commerce-panel__card {
padding: 18px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.84);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.ethnic-adobe-commerce-panel__card h3 {
margin: 16px 0 0;
font-size: 18px;
}
.ethnic-adobe-commerce-panel__card p {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.68;
}
.ethnic-adobe-commerce-card-grid--architecture,
.ethnic-adobe-commerce-card-grid--custom {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 24px;
}
.ethnic-adobe-commerce-card-grid--expansion,
.ethnic-adobe-commerce-card-grid--support {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-adobe-commerce-b2b__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.ethnic-adobe-commerce-checklist li {
font-size: 14px;
font-weight: 600;
line-height: 1.62;
}
.ethnic-adobe-commerce-checklist li::before,
.ethnic-adobe-commerce-cta__highlights li::before {
background: var(--ethnic-adobe-commerce-accent);
box-shadow: 0 0 0 5px rgba(242, 92, 5, 0.12);
}
.ethnic-adobe-commerce-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(242, 92, 5, 0.16), transparent 25%),
radial-gradient(circle at 84% 12%, rgba(231, 255, 137, 0.28), transparent 20%),
radial-gradient(circle at 78% 72%, rgba(47, 107, 255, 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-adobe-commerce-cta::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(242, 92, 5, 0.05) 1px, transparent 1px),
linear-gradient(0deg, rgba(242, 92, 5, 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-adobe-commerce-cta__copy {
position: relative;
display: grid;
align-content: center;
}
.ethnic-adobe-commerce-cta__intro {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 14px;
margin-bottom: 4px;
}
.ethnic-adobe-commerce-cta .ethnic-adobe-commerce-kicker--light {
margin-bottom: 0;
background: rgba(255, 255, 255, 0.92);
border-color: rgba(242, 92, 5, 0.16);
color: var(--ethnic-adobe-commerce-accent-dark) !important;
-webkit-text-fill-color: var(--ethnic-adobe-commerce-accent-dark);
box-shadow: 0 14px 36px rgba(242, 92, 5, 0.12);
}
.ethnic-adobe-commerce-cta__note {
margin: 0;
max-width: 40ch;
}
.ethnic-adobe-commerce-cta h2 {
max-width: 10ch;
font-size: clamp(36px, 4.5vw, 60px);
line-height: 0.98;
letter-spacing: -0.06em;
}
.ethnic-adobe-commerce-cta__lead {
max-width: 58ch;
color: rgba(15, 23, 42, 0.72);
font-size: clamp(16px, 1.35vw, 18px);
line-height: 1.82;
}
.ethnic-adobe-commerce-cta .ethnic-adobe-commerce-actions {
gap: 16px;
margin-top: 30px;
}
.ethnic-adobe-commerce-section--cta .ethnic-adobe-commerce-button--secondary {
background: rgba(255, 255, 255, 0.74);
border-color: rgba(15, 23, 42, 0.12);
color: var(--ethnic-adobe-commerce-text) !important;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(14px);
}
.ethnic-adobe-commerce-cta__highlights {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 24px;
gap: 14px;
}
.ethnic-adobe-commerce-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-adobe-commerce-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-adobe-commerce-cta__highlights li::before {
left: 18px;
top: 20px;
}
.ethnic-adobe-commerce-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-adobe-commerce-cta__panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at top right, rgba(242, 92, 5, 0.16), transparent 34%),
radial-gradient(circle at bottom left, rgba(231, 255, 137, 0.14), transparent 26%);
pointer-events: none;
}
.ethnic-adobe-commerce-cta__panel-header {
position: relative;
z-index: 1;
display: grid;
gap: 10px;
margin-bottom: 10px;
}
.ethnic-adobe-commerce-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-adobe-commerce-cta__panel-eyebrow::before {
background: var(--ethnic-adobe-commerce-lime);
box-shadow: 0 0 0 5px rgba(231, 255, 137, 0.12);
}
.ethnic-adobe-commerce-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-adobe-commerce-cta__steps {
position: relative;
z-index: 1;
display: grid;
gap: 0;
padding: 0;
margin: 0;
list-style: none;
}
.ethnic-adobe-commerce-cta__step {
display: grid;
grid-template-columns: 52px 1fr;
gap: 16px;
padding: 18px 0;
align-items: start;
}
.ethnic-adobe-commerce-cta__step + .ethnic-adobe-commerce-cta__step {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ethnic-adobe-commerce-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-adobe-commerce-cta__step-copy strong,
.ethnic-adobe-commerce-cta__step-copy p {
color: #ffffff;
}
.ethnic-adobe-commerce-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-adobe-commerce-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-adobe-commerce-cta__panel-note strong {
color: #ffffff;
}
@media (max-width: 1200px) {
.ethnic-adobe-commerce-hero__points,
.ethnic-adobe-commerce-cta__highlights {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ethnic-adobe-commerce-card-grid--architecture,
.ethnic-adobe-commerce-b2b__grid,
.ethnic-adobe-commerce-card-grid--custom {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.ethnic-adobe-commerce-hero,
.ethnic-adobe-commerce-overview,
.ethnic-adobe-commerce-split,
.ethnic-adobe-commerce-b2b,
.ethnic-adobe-commerce-cta {
grid-template-columns: 1fr;
}
.ethnic-adobe-commerce-hero {
min-height: auto;
}
.ethnic-adobe-commerce-hero__visual,
.ethnic-adobe-commerce-cta__panel {
max-width: 760px;
}
}
@media (max-width: 767px) {
.ethnic-adobe-commerce-page {
--ethnic-adobe-commerce-shell-padding: 20px;
}
.ethnic-adobe-commerce-section + .ethnic-adobe-commerce-section {
margin-top: 58px;
}
.ethnic-adobe-commerce-hero {
padding: 72px 0 68px;
}
.ethnic-adobe-commerce-hero__title {
max-width: 100%;
font-size: clamp(36px, 10vw, 52px);
}
.ethnic-adobe-commerce-heading__title,
.ethnic-adobe-commerce-cta h2 {
font-size: clamp(28px, 8vw, 38px);
}
.ethnic-adobe-commerce-button {
width: 100%;
}
.ethnic-adobe-commerce-hero__points,
.ethnic-adobe-commerce-card-grid--overview,
.ethnic-adobe-commerce-panel__grid,
.ethnic-adobe-commerce-card-grid--architecture,
.ethnic-adobe-commerce-visual__panels,
.ethnic-adobe-commerce-card-grid--expansion,
.ethnic-adobe-commerce-b2b__grid,
.ethnic-adobe-commerce-card-grid--custom,
.ethnic-adobe-commerce-card-grid--support,
.ethnic-adobe-commerce-cta__highlights {
grid-template-columns: 1fr;
}
.ethnic-adobe-commerce-card,
.ethnic-adobe-commerce-panel,
.ethnic-adobe-commerce-cta,
.ethnic-adobe-commerce-cta__panel {
border-radius: 24px;
}
.ethnic-adobe-commerce-visual {
min-height: auto;
}
.ethnic-adobe-commerce-visual__window {
padding: 18px;
}
.ethnic-adobe-commerce-visual__window-body {
padding: 14px;
}
.ethnic-adobe-commerce-visual__feature {
grid-template-columns: 1fr;
}
.ethnic-adobe-commerce-visual__feature-shot {
min-height: 160px;
}
.ethnic-adobe-commerce-visual__floating {
position: static;
width: 100%;
margin-top: 16px;
}
.ethnic-adobe-commerce-cta__intro {
gap: 10px;
}
.ethnic-adobe-commerce-cta__panel {
padding: 24px 22px;
}
.ethnic-adobe-commerce-cta__step {
grid-template-columns: 44px 1fr;
gap: 14px;
}
.ethnic-adobe-commerce-cta__step-number {
width: 44px;
height: 44px;
border-radius: 15px;
}
}
CSS;
}
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_body_class' ) ) {
function ethnic_adobe_commerce_page_body_class( $classes ) {
if ( ethnic_adobe_commerce_page_is_target() ) {
$classes[] = 'ethnic-adobe-commerce-target';
}
return $classes;
}
add_filter( 'body_class', 'ethnic_adobe_commerce_page_body_class' );
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_print_head_assets' ) ) {
function ethnic_adobe_commerce_page_print_head_assets() {
if ( ! ethnic_adobe_commerce_page_is_target() ) {
return;
}
$data = ethnic_adobe_commerce_page_data();
?>
<style id="ethnic-adobe-commerce-page-inline-css" type="text/css">
<?php echo ethnic_adobe_commerce_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_adobe_commerce_page_print_head_assets', 120 );
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_document_title' ) ) {
function ethnic_adobe_commerce_page_document_title( $title ) {
if ( ethnic_adobe_commerce_page_is_target() ) {
$data = ethnic_adobe_commerce_page_data();
return $data['metaTitle'];
}
return $title;
}
add_filter( 'pre_get_document_title', 'ethnic_adobe_commerce_page_document_title', 50 );
}
if ( ! function_exists( 'ethnic_adobe_commerce_page_replace_content' ) ) {
function ethnic_adobe_commerce_page_replace_content( $content ) {
if ( ! ethnic_adobe_commerce_page_is_target() || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
static $rendered = false;
if ( $rendered ) {
return $content;
}
$rendered = true;
return ethnic_adobe_commerce_page_render();
}
add_filter( 'the_content', 'ethnic_adobe_commerce_page_replace_content', 1000 );
}