<?php
/**
 * 404 Error Page template.
 *
 * @package shop-zen
 */

get_header();
?>

<div id="primary" class="content-area">
    <main id="main-content" class="site-main" role="main">
            <div class="error-404-wrapper">

                <!-- Background element -->
                <div class="error-404-bg-accent" aria-hidden="true"></div>

                <div class="error-404-content">

                    <!-- Large 404 number -->
                    <div class="error-404-code">
                        <span class="error-404-code__digit">4</span>
                        <span class="error-404-code__zero">
                            <span class="error-404-code__zero-inner">0</span>
                        </span>
                        <span class="error-404-code__digit">4</span>
                    </div>

                    <h1 class="error-404-title">
                        <?php esc_html_e( 'Lost in the woods?', 'shop-zen' ); ?>
                    </h1>

                    <p class="error-404-text">
                        <?php esc_html_e( 'The page you\'re looking for has wandered off the trail. It may have been moved, renamed, or never existed. Let\'s get you back to exploring thoughtfully curated essentials.', 'shop-zen' ); ?>
                    </p>

                    <!-- Action Buttons -->
                    <div class="error-404-actions">
                        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="error-404-btn error-404-btn--primary">
                            <?php esc_html_e( 'Back to Home', 'shop-zen' ); ?>
                        </a>
                    </div>

                </div>
            </div>
    </main>
</div>

<?php get_footer(); ?>
