<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page Not Found | 8Stores</title>
        <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('css/site.css') }}">
    </head>
    <body class="error-body">
        <main class="error-shell">
            <a class="brand" href="{{ route('storefront.home') }}">
                @include('partials.brand')
            </a>

            <section class="error-card">
                <span class="error-code">404</span>
                <div>
                    <span class="eyebrow">Page not found</span>
                    <h1>This page is not available.</h1>
                </div>
                <p>The link may be broken, moved, or no longer exists in the 8Stores catalog.</p>
                <div class="error-actions">
                    <a class="button primary" href="{{ route('storefront.home') }}">Go home</a>
                    <a class="button ghost" href="{{ route('login') }}">Customer login</a>
                </div>
            </section>
        </main>
    </body>
</html>
