@extends('layouts.app')

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

@section('title', $product->name . ' — KOTSCH.TECH Shop')
@section('meta_description', $product->short_description)

@section('content')
    {{-- ===== Product-Schema (JSON-LD) für Rich Results: Preis, Verfügbarkeit ===== --}}
    <script type="application/ld+json">
        @php
            $schema = [
                '@context' => 'https://schema.org',
                '@type' => 'Product',
                'name' => $product->name,
                'description' => $product->short_description ?: \Illuminate\Support\Str::limit(strip_tags($product->description), 300),
                'image' => $product->image_url,
                'sku' => $product->sku,
                'category' => $product->category,
                'brand' => ['@type' => 'Brand', 'name' => 'KOTSCH.TECH'],
                'offers' => [
                    '@type' => 'Offer',
                    'url' => route('shop.show', $product->slug),
                    'priceCurrency' => 'EUR',
                    'price' => number_format($product->price_cents / 100, 2, '.', ''),
                    'availability' => $product->is_in_stock ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock',
                    'itemCondition' => 'https://schema.org/NewCondition',
                    'seller' => ['@type' => 'Organization', 'name' => 'KOTSCH.TECH'],
                ],
            ];
        @endphp
        {!! json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) !!}
    </script>

    @includeIf('shop._flash')

    <div class="shx">

        {{-- ===== BREADCRUMB (DIV, kein <nav> — globale nav{position:fixed}-Gotcha) ===== --}}
        <div class="shxp-nav" role="navigation" aria-label="Breadcrumb">
            <div class="container shxp-nav-inner">
                <a href="{{ route('shop.index') }}" class="shxp-back">
                    <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
                    {{ $t('Zurück zum Shop', 'Back to shop') }}
                </a>
                <div class="shxp-breadcrumb">
                    <a href="{{ route('shop.index') }}">Shop</a>
                    <span aria-hidden="true">/</span>
                    <span aria-current="page">{{ $product->name }}</span>
                </div>
            </div>
        </div>

        {{-- ===== PRODUCT DETAIL ===== --}}
        <section class="shxp-detail container">
            <div class="shxp-grid">

                {{-- ----- Gallery ----- --}}
                <div class="shxp-gallery">
                    <div class="shxp-main-img" id="shxp-main-img">
                        @if ($product->stock_quantity <= 0)
                            <span class="shxp-soldout-badge">{{ $t('Ausverkauft', 'Sold out') }}</span>
                        @endif
                        @if ($product->badge)
                            <span class="shxp-badge">{{ $product->badge }}</span>
                        @endif
                        <img
                            src="{{ $product->image_url ?: asset('img/logo-mark.png') }}"
                            alt="{{ $product->name }}"
                            id="shxp-hero-img"
                            onerror="this.onerror=null;this.src='{{ asset('img/logo-mark.png') }}';">
                    </div>

                    @if (count($product->gallery_urls) > 0)
                        <div class="shxp-thumbs" role="list" aria-label="{{ $t('Produktbilder', 'Product images') }}">
                            <button type="button" class="shxp-thumb is-active" data-src="{{ $product->image_url ?: asset('img/logo-mark.png') }}" role="listitem" aria-label="{{ $t('Hauptbild', 'Main image') }}" aria-pressed="true">
                                <img src="{{ $product->image_url ?: asset('img/logo-mark.png') }}" alt="{{ $product->name }}" loading="lazy">
                            </button>
                            @foreach ($product->gallery_urls as $i => $galleryUrl)
                                <button type="button" class="shxp-thumb" data-src="{{ $galleryUrl }}" role="listitem" aria-label="{{ $t('Bild', 'Image') }} {{ $i + 2 }}" aria-pressed="false">
                                    <img src="{{ $galleryUrl }}" alt="{{ $product->name }} {{ $i + 2 }}" loading="lazy">
                                </button>
                            @endforeach
                        </div>
                    @endif
                </div>

                {{-- ----- Product info ----- --}}
                <div class="shxp-info">

                    {{-- Meta --}}
                    <div class="shxp-meta-row">
                        @if ($product->category)
                            <span class="shx-cat">{{ $product->category }}</span>
                        @endif
                        @if ($product->stock_quantity > 0)
                            <span class="shxp-in-stock">
                                <span class="shxp-dot" aria-hidden="true"></span>
                                {{ $t('Sofort verfügbar', 'In stock') }}
                            </span>
                        @else
                            <span class="shxp-out-stock">{{ $t('Ausverkauft', 'Sold out') }}</span>
                        @endif
                    </div>

                    <h1 class="shxp-title">{{ $product->name }}</h1>
                    <p class="shxp-desc">{{ $product->short_description }}</p>

                    {{-- Price --}}
                    <div class="shxp-price-row">
                        <span class="shxp-price">{{ $product->price_formatted }}</span>
                        @if ($product->compare_at_price_formatted)
                            <span class="shxp-compare">{{ $product->compare_at_price_formatted }}</span>
                            <span class="shxp-save">{{ $t('Du sparst', 'You save') }}
                                @php
                                    $saved = ($product->compare_at_price_cents - $product->price_cents);
                                    echo number_format($saved / 100, 2, ',', '.') . ' €';
                                @endphp
                            </span>
                        @endif
                    </div>

                    {{-- Highlights --}}
                    @if ($product->highlights)
                        <ul class="shxp-highlights" aria-label="{{ $t('Highlights', 'Highlights') }}">
                            @foreach ($product->highlights as $hl)
                                <li>
                                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
                                    {{ $hl }}
                                </li>
                            @endforeach
                        </ul>
                    @endif

                    {{-- CTA --}}
                    <div class="shxp-cta">
                        @if ($product->stock_quantity > 0)
                            <form method="POST" action="{{ route('shop.cart.store', $product) }}" class="shxp-add-form">
                                @csrf
                                <div class="shxp-qty-row">
                                    <div class="shxp-stepper" role="group" aria-label="{{ $t('Menge', 'Quantity') }}">
                                        <button type="button" class="shxp-stepper-btn" data-step="-1" aria-label="{{ $t('Menge verringern', 'Decrease quantity') }}">&minus;</button>
                                        <input type="number" name="quantity" value="1" min="1" max="{{ $product->stock_quantity }}" class="shxp-stepper-input" aria-label="{{ $t('Menge', 'Quantity') }}">
                                        <button type="button" class="shxp-stepper-btn" data-step="1" aria-label="{{ $t('Menge erhöhen', 'Increase quantity') }}">+</button>
                                    </div>
                                    <span class="shxp-stock-hint">{{ $product->stock_quantity }} {{ $t('verfügbar', 'available') }}</span>
                                </div>
                                <button type="submit" class="shx-btn shx-btn-primary shxp-buy-btn">
                                    <svg viewBox="0 0 24 24" width="20" height="20" 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('In den Warenkorb', 'Add to cart') }}
                                </button>
                            </form>
                            <a href="{{ route('shop.cart.index') }}" class="shx-btn shx-btn-ghost shxp-cart-link">
                                {{ $t('Zum Warenkorb', 'View cart') }}
                            </a>
                        @else
                            <button type="button" class="shx-btn shx-btn-disabled" disabled>{{ $t('Ausverkauft', 'Sold out') }}</button>
                        @endif
                    </div>

                    {{-- Trust row --}}
                    <ul class="shxp-trust-row">
                        <li>
                            <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"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                            {{ $t('Sofortiger Zugang', 'Instant access') }}
                        </li>
                        <li>
                            <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"><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>
                            {{ $t('Sichere Zahlung', 'Secure payment') }}
                        </li>
                        <li>
                            <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"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>
                            {{ $t('Lebenslange Updates', 'Lifetime updates') }}
                        </li>
                    </ul>

                    {{-- Key specs --}}
                    <div class="shxp-specs">
                        <div class="shxp-spec">
                            <span class="shxp-spec-label">{{ $t('Versand', 'Shipping') }}</span>
                            <strong>
                                @if (($product->shipping_cost_cents ?? 0) === 0)
                                    {{ $t('Kostenlos', 'Free') }}
                                @else
                                    {{ number_format(($product->shipping_cost_cents ?? 0) / 100, 2, ',', '.') }} €
                                @endif
                            </strong>
                        </div>
                        <div class="shxp-spec">
                            <span class="shxp-spec-label">{{ $t('Zahlung', 'Payment') }}</span>
                            <strong>{{ $t('Vorkasse / Überweisung', 'Bank transfer') }}</strong>
                        </div>
                        <div class="shxp-spec">
                            <span class="shxp-spec-label">{{ $t('Lieferung', 'Delivery') }}</span>
                            <strong>{{ $t('Nach Zahlungseingang', 'After payment') }}</strong>
                        </div>
                        @if ($product->sku)
                            <div class="shxp-spec">
                                <span class="shxp-spec-label">SKU</span>
                                <strong>{{ $product->sku }}</strong>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>

        {{-- ===== DESCRIPTION ===== --}}
        <section class="shxp-desc-section">
            <div class="container shxp-desc-grid">
                <div class="shxp-desc-card">
                    <span class="shxp-section-kicker">{{ $t('Über dieses Produkt', 'About this product') }}</span>
                    <h2 class="shxp-section-title">{{ $t('Was dieses Produkt ausmacht', 'What makes this product great') }}</h2>
                    <div class="shxp-desc-body">
                        {!! nl2br(e($product->description ?: $product->short_description)) !!}
                    </div>
                </div>

                <div class="shxp-order-card">
                    <span class="shxp-section-kicker">{{ $t('Bestellung', 'Order') }}</span>
                    <h2 class="shxp-section-title">{{ $t('Sicher bestellen', 'Secure ordering') }}</h2>
                    <ul class="shxp-order-list">
                        <li>
                            <span class="shxp-order-ic"><svg viewBox="0 0 24 24" width="16" height="16" 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><strong>{{ $t('Sofortiger Zugang', 'Instant access') }}</strong><span>{{ $t('Direkt nach Zahlungseingang', 'Right after payment') }}</span></div>
                        </li>
                        <li>
                            <span class="shxp-order-ic"><svg viewBox="0 0 24 24" width="16" height="16" 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><strong>{{ $t('Lebenslange Updates', 'Lifetime updates') }}</strong><span>{{ $t('Für digitale Produkte inklusive', 'Included for digital products') }}</span></div>
                        </li>
                        @foreach ($paymentMethods as $method)
                            <li>
                                <span class="shxp-order-ic"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
                                <div><strong>{{ $method['label'] }}</strong><span>{{ $t('Sichere Zahlung', 'Secure payment') }}</span></div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </section>

        {{-- ===== RELATED PRODUCTS ===== --}}
        @if ($relatedProducts->isNotEmpty())
            <section class="shxp-related">
                <div class="container">
                    <div class="shxp-related-head">
                        <span class="shxp-section-kicker">{{ $t('Mehr im Sortiment', 'More products') }}</span>
                        <h2 class="shxp-section-title">{{ $t('Das könnte dir auch gefallen', 'You might also like') }}</h2>
                    </div>
                    <div class="shxp-related-grid">
                        @foreach ($relatedProducts as $rel)
                            <article class="shxp-rel-card {{ $rel->stock_quantity > 0 ? '' : 'is-soldout' }}">
                                <a href="{{ route('shop.show', $rel) }}" class="shxp-rel-media" aria-label="{{ $rel->name }}">
                                    @if ($rel->stock_quantity <= 0)
                                        <span class="shxp-soldout-badge shxp-soldout-sm">{{ $t('Ausverkauft', 'Sold out') }}</span>
                                    @endif
                                    @if ($rel->badge)
                                        <span class="shxp-rel-badge">{{ $rel->badge }}</span>
                                    @endif
                                    <img src="{{ $rel->image_url ?: asset('img/logo-mark.png') }}" alt="{{ $rel->name }}" loading="lazy" onerror="this.onerror=null;this.src='{{ asset('img/logo-mark.png') }}';">
                                </a>
                                <div class="shxp-rel-body">
                                    @if ($rel->category)
                                        <span class="shx-cat">{{ $rel->category }}</span>
                                    @endif
                                    <h3 class="shxp-rel-name"><a href="{{ route('shop.show', $rel) }}">{{ $rel->name }}</a></h3>
                                    <p class="shxp-rel-desc">{{ $rel->short_description }}</p>
                                    <div class="shxp-rel-foot">
                                        <span class="shx-price" style="font-size:1.15rem;">{{ $rel->price_formatted }}</span>
                                        <a href="{{ route('shop.show', $rel) }}" class="shx-btn shx-btn-ghost shx-btn-sm">{{ $t('Ansehen', 'View') }}</a>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    </div>
                </div>
            </section>
        @endif

    </div>

    <script>
    (function () {
        // Gallery switcher
        document.querySelectorAll('.shxp-thumb').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var src = btn.dataset.src;
                document.getElementById('shxp-hero-img').src = src;
                document.querySelectorAll('.shxp-thumb').forEach(function (b) {
                    b.classList.remove('is-active');
                    b.setAttribute('aria-pressed', 'false');
                });
                btn.classList.add('is-active');
                btn.setAttribute('aria-pressed', 'true');
            });
        });

        // Quantity stepper
        if (!window.__shxpStepperBound) {
            window.__shxpStepperBound = true;
            document.addEventListener('click', function (e) {
                var btn = e.target.closest('.shxp-stepper-btn');
                if (!btn) return;
                var input = btn.closest('.shxp-stepper').querySelector('input');
                if (!input) return;
                var step = parseInt(btn.dataset.step, 10) || 0;
                var min  = input.min !== '' ? parseInt(input.min, 10) : 1;
                var max  = input.max !== '' ? parseInt(input.max, 10) : Infinity;
                input.value = Math.max(min, Math.min(max, (parseInt(input.value, 10) || 1) + step));
                input.dispatchEvent(new Event('change', { bubbles: true }));
            });
        }
    })();
    </script>

    <style>
    /* ===== Product detail page — shxp- scoped ===== */
    .shx{ --p:#0F8A4F;--p-dark:#0a6b3d;--p-light:#34b06f;--p-soft:rgba(15,138,79,.10);--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;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; }

    .shx-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;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 20px rgba(15,138,79,.26); }
    .shx-btn-primary:hover{ transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 12px 28px rgba(15,138,79,.34); }
    .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-disabled{ background:#f1f5f3;color:var(--muted);border-color:var(--line);cursor:not-allowed; }
    .shx-cat{ font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted); }

    /* ---- Breadcrumb nav ---- */
    .shxp-nav{ background:#fff;border-bottom:1px solid var(--line);padding:14px 0; }
    .shxp-nav-inner{ display:flex;align-items:center;justify-content:space-between;gap:16px; }
    .shxp-back{ display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.92rem;font-weight:600;transition:color .15s; }
    .shxp-back:hover{ color:var(--ink); }
    .shxp-breadcrumb{ display:flex;align-items:center;gap:7px;font-size:.85rem;color:var(--muted); }
    .shxp-breadcrumb a{ color:var(--muted);transition:color .15s; }
    .shxp-breadcrumb a:hover{ color:var(--ink); }
    .shxp-breadcrumb [aria-current]{ color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px; }

    /* ---- Detail grid ---- */
    .shxp-detail{ padding-block:clamp(32px,5vw,60px); }
    .shxp-grid{ display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,52px);align-items:start; }

    /* ---- Gallery ---- */
    .shxp-gallery{ position:sticky;top:90px; }
    .shxp-main-img{ position:relative;background:linear-gradient(135deg,#eef6f1,#f7f1e3);border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,36px); }
    .shxp-main-img img{ width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s ease; }
    .shxp-main-img:hover img{ transform:scale(1.04); }
    .shxp-soldout-badge{ position:absolute;top:14px;right:14px;background:#0f172a;color:#fff;border-radius:999px;padding:6px 14px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;z-index:2; }
    .shxp-badge{ position:absolute;top:14px;left:14px;background:linear-gradient(135deg,var(--g-light),var(--g));color:#3a2a07;border-radius:999px;padding:5px 12px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;z-index:2; }
    .shxp-soldout-sm{ top:10px;right:10px;font-size:.64rem;padding:4px 10px; }
    .shxp-thumbs{ display:flex;gap:10px;margin-top:14px;flex-wrap:wrap; }
    .shxp-thumb{ width:72px;height:72px;border-radius:13px;overflow:hidden;background:linear-gradient(135deg,#eef6f1,#f7f1e3);border:2px solid var(--line);padding:6px;cursor:pointer;transition:border-color .15s,transform .15s;flex:none; }
    .shxp-thumb img{ width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply; }
    .shxp-thumb:hover,.shxp-thumb.is-active{ border-color:var(--p);transform:scale(1.04); }
    .shxp-thumb.is-active{ box-shadow:0 0 0 2px var(--p-soft); }

    /* ---- Product info ---- */
    .shxp-meta-row{ display:flex;align-items:center;gap:12px;margin-bottom:14px; }
    .shxp-in-stock{ display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:var(--p-dark);background:var(--p-soft);border-radius:999px;padding:5px 12px; }
    .shxp-dot{ width:7px;height:7px;border-radius:50%;background:var(--p);flex:none;animation:shxp-pulse 2s infinite; }
    @keyframes shxp-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
    .shxp-out-stock{ font-size:.82rem;font-weight:700;color:#9aa3af;background:#f1f5f9;border-radius:999px;padding:5px 12px; }
    .shxp-title{ margin:0 0 14px;font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-.028em;line-height:1.1;color:var(--ink); }
    .shxp-desc{ margin:0 0 22px;color:var(--muted);font-size:1.03rem;line-height:1.65;max-width:52ch; }
    .shxp-price-row{ display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:22px; }
    .shxp-price{ font-size:clamp(2rem,4vw,2.6rem);font-weight:800;color:var(--ink);letter-spacing:-.025em;font-variant-numeric:tabular-nums; }
    .shxp-compare{ font-size:1.15rem;color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums; }
    .shxp-save{ font-size:.84rem;font-weight:700;color:var(--p-dark);background:var(--p-soft);border-radius:999px;padding:4px 11px; }

    /* ---- Highlights ---- */
    .shxp-highlights{ list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px; }
    .shxp-highlights li{ display:flex;align-items:flex-start;gap:10px;font-size:.97rem;color:var(--ink);line-height:1.5; }
    .shxp-highlights li svg{ color:var(--p);flex:none;margin-top:2px; }

    /* ---- CTA area ---- */
    .shxp-cta{ display:flex;flex-direction:column;gap:12px;margin-bottom:22px; }
    .shxp-add-form{ display:flex;flex-direction:column;gap:12px; }
    .shxp-qty-row{ display:flex;align-items:center;gap:14px; }
    .shxp-stepper{ display:inline-flex;align-items:stretch;border:1.5px solid var(--line);border-radius:13px;overflow:hidden;background:#fff; }
    .shxp-stepper-btn{ width:42px;border:0;background:#f8fafc;color:var(--p-dark);font-size:1.25rem;font-weight:800;line-height:1;cursor:pointer;transition:background .15s;font-family:inherit;flex:none; }
    .shxp-stepper-btn:hover{ background:var(--p-soft); }
    .shxp-stepper-input{ width:58px;border:0;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);text-align:center;font:inherit;font-weight:700;font-size:1.05rem;padding:10px 4px;-moz-appearance:textfield;color:var(--ink); }
    .shxp-stepper-input::-webkit-outer-spin-button,.shxp-stepper-input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; }
    .shxp-stock-hint{ font-size:.84rem;color:var(--muted);font-weight:600; }
    .shxp-buy-btn{ width:100%;font-size:1.08rem;padding:16px 24px;min-height:56px; }
    .shxp-cart-link{ width:100%; }

    /* ---- Trust row ---- */
    .shxp-trust-row{ list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:14px 24px; }
    .shxp-trust-row li{ display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted);font-weight:600; }
    .shxp-trust-row li svg{ color:var(--p);flex:none; }

    /* ---- Key specs ---- */
    .shxp-specs{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
    .shxp-spec{ background:linear-gradient(180deg,#fbfdfc,#f5faf7);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px; }
    .shxp-spec-label{ font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted); }
    .shxp-spec strong{ font-size:.95rem;font-weight:800;color:var(--ink); }

    /* ---- Description section ---- */
    .shxp-desc-section{ background:linear-gradient(180deg,#fbfdfc,#ffffff);border-top:1px solid var(--line);padding:clamp(40px,6vw,72px) 0; }
    .shxp-desc-grid{ display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(24px,4vw,48px);align-items:start; }
    .shxp-section-kicker{ font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--g-dark); }
    .shxp-section-title{ margin:10px 0 20px;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.022em;color:var(--ink);line-height:1.15; }
    .shxp-desc-card{ padding:clamp(22px,3vw,32px);background:#fff;border:1px solid var(--line);border-radius:var(--rad);box-shadow:0 2px 8px rgba(15,23,42,.04); }
    .shxp-desc-body{ color:var(--muted);font-size:.97rem;line-height:1.75; }
    .shxp-order-card{ padding:clamp(22px,3vw,32px);background:#fff;border:1px solid var(--line);border-radius:var(--rad);box-shadow:0 2px 8px rgba(15,23,42,.04);position:sticky;top:90px;overflow:hidden; }
    .shxp-order-card::before{ content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--p),var(--g)); }
    .shxp-order-list{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px; }
    .shxp-order-list li{ display:flex;align-items:flex-start;gap:12px; }
    .shxp-order-ic{ flex:none;width:32px;height:32px;border-radius:9px;background:var(--p-soft);color:var(--p);display:flex;align-items:center;justify-content:center;margin-top:1px; }
    .shxp-order-list li div{ display:flex;flex-direction:column;gap:2px; }
    .shxp-order-list li div strong{ font-size:.95rem;font-weight:800;color:var(--ink); }
    .shxp-order-list li div span{ font-size:.82rem;color:var(--muted); }

    /* ---- Related products ---- */
    .shxp-related{ padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line); }
    .shxp-related-head{ margin-bottom:28px; }
    .shxp-related-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px; }
    .shxp-rel-card{ position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;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; }
    .shxp-rel-card:hover{ transform:translateY(-5px);border-color:var(--p-light);box-shadow:0 18px 40px -16px rgba(15,138,79,.28); }
    .shxp-rel-media{ position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;padding:18px;background:linear-gradient(135deg,#eef6f1,#f7f1e3); }
    .shxp-rel-media img{ width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .35s ease; }
    .shxp-rel-card:hover .shxp-rel-media img{ transform:scale(1.05); }
    .shxp-rel-badge{ position:absolute;top:10px;left:10px;background:linear-gradient(135deg,var(--p),var(--p-dark));color:#fff;border-radius:999px;padding:4px 10px;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;z-index:2; }
    .shxp-rel-body{ display:flex;flex-direction:column;gap:10px;padding:18px;flex:1; }
    .shxp-rel-name{ margin:0;font-size:1.1rem;font-weight:800;letter-spacing:-.01em;line-height:1.3; }
    .shxp-rel-name a{ color:var(--ink);transition:color .15s; }
    .shxp-rel-name a:hover{ color:var(--p-dark); }
    .shxp-rel-desc{ margin:0;color:var(--muted);font-size:.89rem;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0; }
    .shxp-rel-foot{ display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto; }
    .shxp-rel-card.is-soldout .shxp-rel-media img{ filter:grayscale(.5);opacity:.65; }

    /* ---- Responsive ---- */
    @media (max-width:960px){
        .shxp-grid{ grid-template-columns:1fr; }
        .shxp-gallery{ position:static; }
        .shxp-desc-grid{ grid-template-columns:1fr; }
        .shxp-order-card{ position:static; }
    }
    @media (max-width:640px){
        .shxp-nav-inner{ flex-direction:row; }
        .shxp-breadcrumb{ display:none; }
        .shxp-specs{ grid-template-columns:1fr 1fr; }
        .shxp-trust-row{ gap:10px 18px; }
        .shxp-thumbs .shxp-thumb{ width:60px;height:60px; }
    }
    @media (prefers-reduced-motion:reduce){
        .shx-btn,.shxp-thumb,.shxp-rel-card,.shxp-back,.shxp-main-img img{ transition:none !important; }
        .shxp-rel-card:hover{ transform:none !important; }
        .shxp-dot{ animation:none !important; }
    }
    </style>
@endsection