@extends('layouts.app')
@section('ownCta', '1') {{-- eigene Pre-Footer-CTA (.shx-cta) → generische Footer-CTA unterdrücken --}}

@php
    $siteLocale = in_array(request()->segment(1), ['de','en'], true) ? request()->segment(1) : 'de';
    $en = $siteLocale === 'en';
    $t = fn($de, $enT) => $en ? $enT : $de;
    $lp = $en ? 'en/' : '';

    // Lagertext zweisprachig (der Model-Accessor stock_label ist nur deutsch).
    $stockText = function ($p) use ($t) {
        if ($p->stock_quantity <= 0) return $t('Aktuell ausverkauft', 'Currently sold out');
        if ($p->stock_quantity <= 5) return $t('Nur noch wenige verfügbar', 'Only a few left');
        return $t('Sofort verfügbar', 'Available instantly');
    };
    // Echte Gesamtzahl im Sortiment (NICHT die kategorie-gefilterte $products-Anzahl).
    $totalProducts = \App\Models\ShopProduct::published()->count();
@endphp

@section('title', $t('Shop — Digitale Produkte von KOTSCH.TECH', 'Shop — Digital products by KOTSCH.TECH'))
@section('meta_description', $t(
    'Software, Vorlagen und Lernunterlagen von KOTSCH.TECH — sofort verfügbar nach dem Kauf, sichere Zahlung per Vorkasse, lebenslange Updates für digitale Produkte.',
    'Software, templates and study material by KOTSCH.TECH — available instantly after purchase, secure prepayment, lifetime updates for digital products.'
))

@section('content')
    @includeIf('shop._flash')

    <div class="shx">

        {{-- ============================== HERO ============================== --}}
        <header class="shx-hero">
            <div class="shx-hero-grid" aria-hidden="true"></div>
            <div class="shx-hero-inner">
                <span class="shx-kicker">
                    <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>
                    {{ $t('Shop · Digitale Produkte', 'Shop · Digital products') }}
                </span>
                <h1 class="shx-h1">
                    {{ $t('Digitale Produkte,', 'Digital products,') }}
                    <span>{{ $t('sofort verfügbar.', 'available instantly.') }}</span>
                </h1>
                <p class="shx-lead">
                    {{ $t('Software, Vorlagen und Lernunterlagen von KOTSCH.TECH —', 'Software, templates and study material by KOTSCH.TECH —') }}
                    <strong>{{ $t('direkt nach dem Kauf', 'right after purchase') }}</strong>{{ $t(', sichere Zahlung per Vorkasse.', ', secure prepayment.') }}
                </p>
                @if ($totalProducts > 0)
                    <span class="shx-livecount">
                        <span class="shx-dot" aria-hidden="true"></span>
                        {{ $totalProducts }} {{ $t($totalProducts === 1 ? 'Produkt' : 'Produkte', $totalProducts === 1 ? 'product' : 'products') }}
                    </span>
                @endif
            </div>
        </header>

        {{-- ============================ TRUST STRIP ============================ --}}
        <section id="shop-vorteile" class="shx-trust" aria-label="{{ $t('Vorteile', 'Benefits') }}">
            <div class="container shx-trust-grid">
                <div class="shx-trust-item">
                    <span class="shx-trust-ic" aria-hidden="true">
                        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                    </span>
                    <div class="shx-trust-text">
                        <strong>{{ $t('Sofort verfügbar', 'Instantly available') }}</strong>
                        <span>{{ $t('Verfügbar direkt nach dem Kauf.', 'Available right after purchase.') }}</span>
                    </div>
                </div>
                <div class="shx-trust-item">
                    <span class="shx-trust-ic" aria-hidden="true">
                        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 6v6c0 5 3.4 8.5 8 10 4.6-1.5 8-5 8-10V6l-8-4z"/><path d="m9 12 2 2 4-4"/></svg>
                    </span>
                    <div class="shx-trust-text">
                        <strong>{{ $t('Sichere Zahlung', 'Secure payment') }}</strong>
                        <span>{{ $t('Per Vorkasse / Überweisung.', 'By prepayment / bank transfer.') }}</span>
                    </div>
                </div>
                <div class="shx-trust-item">
                    <span class="shx-trust-ic" aria-hidden="true">
                        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>
                    </span>
                    <div class="shx-trust-text">
                        <strong>{{ $t('Lebenslange Updates', 'Lifetime updates') }}</strong>
                        <span>{{ $t('Für digitale Produkte inklusive.', 'Included for digital products.') }}</span>
                    </div>
                </div>
            </div>
        </section>

        {{-- ========================== FEATURED ROW ========================== --}}
        @if ($featuredProducts->isNotEmpty())
            <section class="shx-section shx-featured" aria-label="{{ $t('Empfohlen', 'Featured') }}">
                <div class="container">
                    <div class="shx-sec-head">
                        <span class="shx-eyebrow">{{ $t('Empfohlen', 'Featured') }}</span>
                        <h2 class="shx-h2">{{ $t('Highlights aus dem Sortiment', 'Highlights from the range') }}</h2>
                    </div>

                    <div class="shx-feat-grid">
                        @foreach ($featuredProducts as $featuredProduct)
                            <article class="shx-feat-card {{ $featuredProduct->stock_quantity > 0 ? '' : 'is-soldout' }}">
                                <a href="{{ route('shop.show', $featuredProduct) }}" class="shx-feat-media" aria-label="{{ $featuredProduct->name }}">
                                    @if ($featuredProduct->stock_quantity <= 0)
                                        <span class="shx-soldout-tag">{{ $t('Ausverkauft', 'Sold out') }}</span>
                                    @endif
                                    <img src="{{ $featuredProduct->image_url ?: asset('img/logo-mark.png') }}" alt="{{ $featuredProduct->name }}" loading="lazy"
                                         onerror="this.onerror=null;this.src='{{ asset('img/logo-mark.png') }}';">
                                </a>
                                <div class="shx-feat-body">
                                    <div class="shx-card-meta">
                                        <span class="shx-badge shx-badge-gold">{{ $featuredProduct->badge ?: $t('Empfohlen', 'Featured') }}</span>
                                        @if ($featuredProduct->category)
                                            <span class="shx-cat">{{ $featuredProduct->category }}</span>
                                        @endif
                                    </div>
                                    <h3 class="shx-feat-title">
                                        <a href="{{ route('shop.show', $featuredProduct) }}">{{ $featuredProduct->name }}</a>
                                    </h3>
                                    <p class="shx-feat-desc">{{ $featuredProduct->short_description }}</p>
                                    <div class="shx-price-row">
                                        <span class="shx-price">{{ $featuredProduct->price_formatted }}</span>
                                        <span class="shx-stock {{ $featuredProduct->stock_quantity > 0 ? '' : 'is-out' }}">{{ $stockText($featuredProduct) }}</span>
                                    </div>
                                    <div class="shx-card-actions">
                                        <a href="{{ route('shop.show', $featuredProduct) }}" class="shx-btn shx-btn-ghost shx-btn-sm">{{ $t('Details', 'Details') }}</a>
                                        @if ($featuredProduct->stock_quantity > 0)
                                            <form method="POST" action="{{ rtrim(config('app.url'), '/') }}/shop/warenkorb/{{ $featuredProduct->slug }}" class="shx-add-form">
                                                @csrf
                                                <button type="submit" class="shx-btn shx-btn-primary shx-btn-sm">
                                                    {{ $t('In den Warenkorb', 'Add to cart') }}
                                                </button>
                                            </form>
                                        @else
                                            <span class="shx-btn shx-btn-disabled shx-btn-sm" aria-disabled="true">{{ $t('Ausverkauft', 'Sold out') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

        {{-- =========================== PRODUCT GRID =========================== --}}
        <section id="shop-grid" class="shx-section shx-catalog">
            <div class="container">
                <div class="shx-sec-head shx-catalog-head">
                    <div>
                        <span class="shx-eyebrow">{{ $t('Sortiment', 'Catalog') }}</span>
                        <h2 class="shx-h2">{{ $t('Alle digitalen Produkte', 'All digital products') }}</h2>
                    </div>
                </div>

                {{-- Category filter rail (DIV, kein <nav> — globale nav{position:fixed}-Gotcha) --}}
                <div class="shx-filter" role="navigation" aria-label="{{ $t('Kategorien', 'Categories') }}">
                    <a href="{{ route('shop.index') }}" class="shx-chip {{ $selectedCategory === '' ? 'is-active' : '' }}">
                        {{ $t('Alle', 'All') }}
                    </a>
                    @foreach ($categories as $category)
                        <a href="{{ route('shop.index', ['category' => $category]) }}"
                           class="shx-chip {{ $selectedCategory === $category ? 'is-active' : '' }}">
                            {{ $category }}
                        </a>
                    @endforeach
                </div>

                @if ($products->isEmpty())
                    <div class="shx-empty">
                        <span class="shx-empty-ic" aria-hidden="true">
                            <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m21 16-9 5-9-5V8l9-5 9 5z"/><path d="M3.3 7 12 12l8.7-5M12 22V12"/></svg>
                        </span>
                        <h3 class="shx-empty-title">{{ $t('Noch keine Produkte in dieser Kategorie', 'No products in this category yet') }}</h3>
                        <p class="shx-empty-copy">{{ $t('Bitte wähle eine andere Kategorie oder schau dir das komplette Sortiment an.', 'Please pick another category or browse the full catalog.') }}</p>
                        <a href="{{ route('shop.index') }}" class="shx-btn shx-btn-primary shx-btn-sm">{{ $t('Alle Produkte zeigen', 'Show all products') }}</a>
                    </div>
                @else
                    <div class="shx-grid">
                        @foreach ($products as $product)
                            <article class="shx-card {{ $product->stock_quantity > 0 ? '' : 'is-soldout' }}">
                                <a href="{{ route('shop.show', $product) }}" class="shx-media" aria-label="{{ $product->name }}">
                                    @if ($product->badge)
                                        <span class="shx-badge shx-badge-float">{{ $product->badge }}</span>
                                    @endif
                                    @if ($product->stock_quantity <= 0)
                                        <span class="shx-soldout-tag">{{ $t('Ausverkauft', 'Sold out') }}</span>
                                    @endif
                                    <img src="{{ $product->image_url ?: asset('img/logo-mark.png') }}" alt="{{ $product->name }}" loading="lazy"
                                         onerror="this.onerror=null;this.src='{{ asset('img/logo-mark.png') }}';">
                                </a>

                                <div class="shx-body">
                                    <div class="shx-card-meta">
                                        @if ($product->category)
                                            <span class="shx-cat">{{ $product->category }}</span>
                                        @endif
                                        <span class="shx-stock {{ $product->stock_quantity > 0 ? '' : 'is-out' }}">{{ $stockText($product) }}</span>
                                    </div>

                                    <h3 class="shx-card-title">
                                        <a href="{{ route('shop.show', $product) }}">{{ $product->name }}</a>
                                    </h3>
                                    <p class="shx-card-desc">{{ $product->short_description }}</p>

                                    <div class="shx-card-foot">
                                        <span class="shx-price">{{ $product->price_formatted }}</span>
                                        @if ($product->stock_quantity > 0)
                                            <form method="POST" action="{{ rtrim(config('app.url'), '/') }}/shop/warenkorb/{{ $product->slug }}" class="shx-add-form">
                                                @csrf
                                                <button type="submit" class="shx-btn shx-btn-primary shx-btn-sm shx-btn-cart">
                                                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>
                                                    {{ $t('In den Warenkorb', 'Add to cart') }}
                                                </button>
                                            </form>
                                        @else
                                            <span class="shx-btn shx-btn-disabled shx-btn-sm" aria-disabled="true">{{ $t('Ausverkauft', 'Sold out') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    </div>
                @endif
            </div>
        </section>

        {{-- ============================ FINAL CTA ============================ --}}
        <section class="shx-cta">
            <div class="container shx-cta-inner">
                <h2 class="shx-cta-title">{{ $t('Bereit für dein nächstes digitales Werkzeug?', 'Ready for your next digital tool?') }}</h2>
                <p class="shx-cta-copy">{{ $t(
                    'Digitale Produkte von KOTSCH.TECH — sofort verfügbar, mit lebenslangen Updates und sicherer Zahlung per Vorkasse.',
                    'Digital products by KOTSCH.TECH — instantly available, with lifetime updates and secure prepayment.'
                ) }}</p>
                <div class="shx-cta-actions">
                    <a href="#shop-grid" class="shx-btn shx-btn-gold">{{ $t('Sortiment durchstöbern', 'Browse the catalog') }}</a>
                    <a href="{{ route('shop.cart.index') }}" class="shx-btn shx-btn-ghost-d">{{ $t('Zum Warenkorb', 'Go to cart') }}</a>
                </div>
            </div>
        </section>

    </div>

    @includeIf('shop._csrf')

    <style>
    /* ===== Boutique shop — scoped (shx-) ===== */
    .shx{
        --p:#0F8A4F;
        --p-dark:#0a6b3d;
        --p-light:#34b06f;
        --p-soft:rgba(15,138,79,.10);
        --p-glow:rgba(15,138,79,.22);
        --g:#C8962B;
        --g-dark:#a87b1f;
        --g-light:#e3b653;
        --g-soft:rgba(200,150,43,.12);
        --ink:var(--text-main,#0f172a);
        --muted:var(--text-muted,#64748b);
        --line:var(--border,#e2e8f0);
        --surface:#ffffff;
        --rad:22px;
        --tap:var(--tap-min,48px);
        color:var(--ink);
        overflow-x:hidden;
    }
    .shx *{ box-sizing:border-box; }
    .shx .container{ width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px); }
    .shx a{ text-decoration:none; }
    .shx img{ max-width:100%;display:block; }

    #shop-grid, #shop-vorteile{ scroll-margin-top:84px; }

    /* ---------- Hero (Bereichs-Header-Muster — wie win-/ax-/news) ---------- */
    .shx-hero{
        position:relative;overflow:hidden;text-align:center;
        padding:clamp(96px,11vw,128px) 8% clamp(48px,6vw,64px);
        background:
            radial-gradient(120% 80% at 50% -10%, rgba(15,138,79,.10) 0%, rgba(15,138,79,0) 55%),
            #ffffff;
    }
    .shx-hero-grid{
        position:absolute;inset:0;pointer-events:none;
        background-image:
            linear-gradient(rgba(15,138,79,.05) 1px,transparent 1px),
            linear-gradient(90deg,rgba(15,138,79,.05) 1px,transparent 1px);
        background-size:56px 56px;
        -webkit-mask-image:radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
        mask-image:radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
    }
    .shx-hero-inner{ position:relative;max-width:760px;margin:0 auto; }
    .shx-kicker{
        display:inline-flex;align-items:center;gap:.5rem;
        padding:7px 14px;border-radius:999px;
        background:rgba(15,138,79,.10);color:var(--p-dark);
        font-size:.68rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
    }
    .shx-kicker svg{ flex:none; }
    .shx-h1{
        font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:800;
        line-height:1.05;letter-spacing:-1.5px;color:var(--ink);margin:18px 0 0;
    }
    .shx-h1 span{ color:var(--p); }
    .shx-lead{
        max-width:560px;margin:16px auto 0;color:var(--muted);
        font-size:1.02rem;line-height:1.55;
    }
    .shx-lead strong{ color:var(--ink);font-weight:700; }
    .shx-livecount{
        display:inline-flex;align-items:center;gap:.5rem;margin-top:22px;
        padding:7px 15px;border-radius:999px;
        background:#ecfdf3;border:1px solid #b7e8cb;
        color:var(--p-dark);font-weight:700;font-size:.82rem;
    }
    .shx-dot{
        width:.55rem;height:.55rem;border-radius:50%;
        background:var(--p);animation:shxPulse 2.2s ease-out infinite;
    }
    @keyframes shxPulse{
        0%{ box-shadow:0 0 0 0 rgba(15,138,79,.5); }
        70%{ box-shadow:0 0 0 8px rgba(15,138,79,0); }
        100%{ box-shadow:0 0 0 0 rgba(15,138,79,0); }
    }

    /* ---------- Buttons ---------- */
    .shx-btn{
        display:inline-flex;align-items:center;justify-content:center;gap:9px;
        min-height:var(--tap);padding:13px 24px;border-radius:13px;
        font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;border:1px solid transparent;
        transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
    }
    .shx-btn-sm{ min-height:44px;padding:11px 18px;font-size:.92rem;border-radius:11px; }
    .shx-btn-primary{
        background:linear-gradient(135deg,var(--p),var(--p-dark));color:#fff;
        box-shadow:0 8px 24px rgba(15,138,79,.28);
    }
    .shx-btn-primary:hover{ transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 32px rgba(15,138,79,.36); }
    .shx-btn-primary:active{ transform:translateY(0); }
    .shx-btn-gold{
        background:linear-gradient(135deg,var(--g-light),var(--g));color:#3a2a07;
        box-shadow:0 8px 22px rgba(200,150,43,.32);
    }
    .shx-btn-gold:hover{ transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 12px 30px rgba(200,150,43,.4); }
    .shx-btn-ghost{
        background:#fff;color:var(--p-dark);border-color:var(--line);
    }
    .shx-btn-ghost:hover{ background:var(--p-soft);border-color:var(--p-light);transform:translateY(-2px); }
    .shx-btn-cart{ width:100%; }
    .shx-btn-disabled{
        background:#f1f5f3;color:var(--muted);border-color:var(--line);cursor:not-allowed;
    }
    .shx-btn-ghost-d{
        background:transparent;color:#e8f3ec;border-color:rgba(255,255,255,.28);
    }
    .shx-btn-ghost-d:hover{ background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);transform:translateY(-2px); }

    /* ---------- Trust strip ---------- */
    .shx-trust{ background:#fff;border-bottom:1px solid var(--line);padding:26px 0; }
    .shx-trust-grid{
        display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px;
    }
    .shx-trust-item{ display:flex;gap:14px;align-items:center;min-width:0; }
    .shx-trust-ic{
        flex:none;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
        background:var(--p-soft);color:var(--p);border:1px solid rgba(15,138,79,.16);
    }
    .shx-trust-text{ min-width:0;display:flex;flex-direction:column;gap:2px; }
    .shx-trust-text strong{ font-weight:800;font-size:1rem;color:var(--ink); }
    .shx-trust-text span{ font-size:.86rem;color:var(--muted); }

    /* ---------- Section scaffolding ---------- */
    .shx-section{ padding:clamp(48px,7vw,80px) 0; }
    .shx-sec-head{ margin-bottom:clamp(22px,3vw,34px); }
    .shx-eyebrow{
        display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
        color:var(--g-dark);
    }
    .shx-h2{ margin:10px 0 0;font-weight:800;letter-spacing:-.02em;font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--ink);line-height:1.12; }

    /* ---------- Shared card meta ---------- */
    .shx-card-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0; }
    .shx-cat{
        font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
    }
    .shx-badge{
        display:inline-flex;align-items:center;border-radius:999px;padding:4px 11px;
        font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
    }
    .shx-badge-gold{ background:linear-gradient(135deg,var(--g-light),var(--g));color:#3a2a07; }
    .shx-badge-float{
        position:absolute;top:12px;left:12px;z-index:2;
        background:linear-gradient(135deg,var(--p),var(--p-dark));color:#fff;box-shadow:0 4px 12px rgba(15,138,79,.3);
    }
    .shx-price{ font-weight:800;font-size:1.32rem;color:var(--ink);letter-spacing:-.015em;font-variant-numeric:tabular-nums; }
    .shx-stock{ font-size:.8rem;font-weight:600;color:var(--p-dark); }
    .shx-stock.is-out{ color:#9aa3af; }
    .shx-soldout-tag{
        position:absolute;top:12px;right:12px;z-index:2;background:#0f172a;color:#fff;
        border-radius:999px;padding:5px 12px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
    }

    /* ---------- Featured row ---------- */
    .shx-featured{ background:linear-gradient(180deg,#fbfdfc,#ffffff); }
    .shx-feat-grid{
        display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;
    }
    .shx-feat-card{
        position:relative;display:flex;flex-direction:column;background:var(--surface);
        border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;min-width:0;
        box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 36px -18px rgba(15,23,42,.18);
        transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
    }
    .shx-feat-card:hover{ transform:translateY(-5px);border-color:var(--p-light);box-shadow:0 22px 48px -20px rgba(15,138,79,.3); }
    .shx-feat-media{
        position:relative;display:flex;align-items:center;justify-content:center;
        aspect-ratio:16/10;padding:18px;background:linear-gradient(135deg,#eef6f1,#f7f1e3);
    }
    .shx-feat-media img{ width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .35s ease; }
    .shx-feat-card:hover .shx-feat-media img{ transform:scale(1.04); }
    .shx-feat-body{ display:flex;flex-direction:column;gap:12px;padding:20px;min-width:0; }
    .shx-feat-title{ margin:0;font-size:1.22rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;min-width:0; }
    .shx-feat-title a{ color:var(--ink); }
    .shx-feat-title a:hover{ color:var(--p-dark); }
    .shx-feat-desc{ margin:0;color:var(--muted);font-size:.94rem;line-height:1.55;min-width:0; }
    .shx-price-row{ display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto; }
    .shx-card-actions{ display:flex;flex-wrap:wrap;gap:10px; }
    .shx-card-actions .shx-add-form{ margin:0;flex:1 1 auto;min-width:0; }
    .shx-card-actions .shx-add-form .shx-btn{ width:100%; }

    /* ---------- Filter rail ---------- */
    .shx-filter{ display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(22px,3vw,32px); }
    .shx-chip{
        display:inline-flex;align-items:center;min-height:42px;padding:9px 18px;border-radius:999px;
        font-weight:700;font-size:.92rem;color:var(--muted);background:#fff;border:1px solid var(--line);
        transition:transform .15s ease,color .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
    }
    .shx-chip:hover{ color:var(--p-dark);border-color:var(--p-light);transform:translateY(-1px); }
    .shx-chip.is-active{
        background:linear-gradient(135deg,var(--p),var(--g));color:#fff;border-color:transparent;
        box-shadow:0 6px 16px rgba(15,138,79,.26);
    }

    /* ---------- Product grid ---------- */
    .shx-grid{
        display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px;
    }
    .shx-card{
        position:relative;display:flex;flex-direction:column;background:var(--surface);
        border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;min-width:0;
        box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -16px rgba(15,23,42,.16);
        transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
    }
    .shx-card:hover{ transform:translateY(-6px);border-color:var(--p-light);box-shadow:0 20px 44px -18px rgba(15,138,79,.28); }
    .shx-media{
        position:relative;display:flex;align-items:center;justify-content:center;
        aspect-ratio:4/3;padding:18px;background:linear-gradient(135deg,#eef6f1,#f7f1e3);
    }
    .shx-media img{ width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .35s ease; }
    .shx-card:hover .shx-media img{ transform:scale(1.05); }
    .shx-card.is-soldout .shx-media img{ filter:grayscale(.5);opacity:.65; }
    .shx-body{ display:flex;flex-direction:column;gap:12px;padding:20px;min-width:0;flex:1; }
    .shx-card-title{ margin:0;font-size:1.16rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;min-width:0; }
    .shx-card-title a{ color:var(--ink); }
    .shx-card-title a:hover{ color:var(--p-dark); }
    .shx-card-desc{
        margin:0;color:var(--muted);font-size:.92rem;line-height:1.55;min-width:0;
        display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    }
    .shx-card-foot{ margin-top:auto;display:flex;flex-direction:column;gap:14px; }
    .shx-card-foot .shx-add-form{ margin:0; }

    /* ---------- Empty state ---------- */
    .shx-empty{
        text-align:center;background:var(--surface);border:1px dashed var(--line);border-radius:var(--rad);
        padding:clamp(36px,6vw,64px) 24px;max-width:560px;margin:0 auto;
    }
    .shx-empty-ic{
        display:inline-flex;align-items:center;justify-content:center;width:78px;height:78px;border-radius:50%;
        background:var(--p-soft);color:var(--p);margin-bottom:18px;
    }
    .shx-empty-title{ margin:0 0 10px;font-size:clamp(1.3rem,3vw,1.7rem);font-weight:800;color:var(--ink); }
    .shx-empty-copy{ margin:0 auto 22px;max-width:42ch;color:var(--muted);line-height:1.6; }

    /* ---------- Final CTA (single dark band) ---------- */
    .shx-cta{
        background:
            radial-gradient(700px 320px at 80% -40px, rgba(200,150,43,.18), transparent 70%),
            radial-gradient(600px 300px at 10% 120%, rgba(15,138,79,.22), transparent 70%),
            var(--bg-dark,#020617);
        color:#fff;padding:clamp(52px,8vw,88px) 0;
        /* Globales section{max-width:1600px;margin:0 auto} aufheben → dunkler Bereich
           spannt voll von links nach rechts (Inhalt bleibt via .container zentriert). */
        max-width:none;margin-inline:0;width:100%;
    }
    .shx-cta-inner{ text-align:center;max-width:720px; }
    .shx-cta-title{ margin:0;color:#fff;font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.15; }
    .shx-cta-copy{ margin:16px auto 0;max-width:52ch;color:#cbd5e1;font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.6; }
    .shx-cta-actions{ display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:30px; }

    /* ---------- Responsive ---------- */
    @media (max-width:900px){
        .shx-hero-inner{ grid-template-columns:1fr; }
    }
    @media (max-width:560px){
        .shx-hero-actions{ flex-direction:column;align-items:stretch; }
        .shx-hero-actions .shx-btn{ width:100%; }
        .shx-hero-chips{ gap:10px; }
        .shx-cta-actions{ flex-direction:column;align-items:stretch; }
        .shx-cta-actions .shx-btn{ width:100%; }
        .shx-card-actions{ flex-direction:column; }
        .shx-card-actions .shx-btn{ width:100%; }
    }
    @media (prefers-reduced-motion:reduce){
        .shx-btn,.shx-chip,.shx-card,.shx-feat-card,.shx-media img,.shx-feat-media img{ transition:none !important; }
        .shx-card:hover,.shx-feat-card:hover{ transform:none !important; }
        .shx-card:hover .shx-media img,.shx-feat-card:hover .shx-feat-media img{ transform:none !important; }
        .shx-dot{ animation:none !important; }
    }
    </style>
@endsection