<div class="relative -z-10 -mt-15 min-h-product-hero-spacer sm:min-h-product-hero-spacer-sm"></div>

<div {{ attributes.defaults({ class: 'bg-page max-w-large large:mx-auto relative mx-2 flex flex-col lg:mx-8' }) }}>
    {{ component('shop:Vacation', { config: config }) }}

    <div class="mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 pt-10 pb-2 md:px-10 lg:px-16 lg:pt-16">
        <a
            href="{{ path('shop', { slug: category.slug }) }}"
            class="text-foreground/70 inline-flex w-fit items-center gap-2 text-sm tracking-status uppercase transition hover:text-foreground"
        >
            <span aria-hidden="true">&larr;</span>
            {{ 'shop.product.back_to_shop'|trans }}
        </a>
        <div class="max-w-3xl">
            <div class="text-sm tracking-label uppercase text-foreground/50">{{ category.name }}</div>
            <h1 class="mt-4 font-serif text-3xl tracking-card-title uppercase text-foreground sm:text-4xl lg:text-5xl">{{ product.name|raw }}</h1>
            {% if product.quality %}
                <div class="mt-3 text-lg tracking-status uppercase text-accent">{{ product.quality|raw }}</div>
            {% endif %}
        </div>
    </div>

    <div class="mx-auto flex w-full max-w-7xl flex-col gap-10 px-4 py-10 md:px-10 lg:px-16 lg:py-16">
        {{ component('shop:ProductDetailForm', { product: product }) }}
        {{ component('shop:LegalNotice', { class: 'max-w-none pt-2' }) }}
    </div>
</div>
