@extends('layouts.app')

@php
    $freeFrom = number_format(($shippingConfig['free_from_cents'] ?? 5000) / 100, 0, ',', '.');
@endphp

@section('title', 'Warenkorb — KOTSCH.TECH Shop')
@section('meta_description', 'Dein Warenkorb bei KOTSCH.TECH — überprüfe deine Auswahl und gehe zur Kasse.')

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

    <div class="shx">

        {{-- ===== PAGE HEADER (Bereichs-Muster, zentriert) ===== --}}
        <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>
                    Shop · Warenkorb
                </span>
                <h1 class="shx-h1">
                    Dein
                    <span>Warenkorb.</span>
                </h1>
                @if ($summary['count'] > 0)
                    <p class="shx-lead">
                        <strong>{{ $summary['count'] }} {{ $summary['count'] === 1 ? 'Artikel' : 'Artikel' }}</strong> — bereit zur Bestellung. Bezahlung per Vorkasse, Zugang sofort nach Zahlungseingang.
                    </p>
                    <span class="shx-livecount">
                        <span class="shx-dot" aria-hidden="true"></span>
                        {{ $summary['count'] }} {{ $summary['count'] === 1 ? 'Artikel' : 'Artikel' }} im Korb
                    </span>
                @else
                    <p class="shx-lead">Noch nichts ausgewählt — leg los und entdecke alle digitalen Produkte.</p>
                @endif
                <div style="margin-top:22px;">
                    <a href="{{ route('shop.index') }}" class="shxc-back">
                        <svg viewBox="0 0 24 24" width="16" height="16" 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>
                        Zurück zum Shop
                    </a>
                </div>
            </div>
        </header>

        @if ($summary['count'] === 0)

            {{-- ===== EMPTY STATE ===== --}}
            <section class="shxc-empty-wrap">
                <div class="container shxc-empty">
                    <div class="shxc-empty-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><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>
                    </div>
                    <h2 class="shxc-empty-title">Dein Warenkorb ist leer</h2>
                    <p class="shxc-empty-copy">Lege Produkte in den Warenkorb und gehe anschließend zur Kasse. Bezahlung per Vorkasse, Zugang sofort nach Zahlungseingang.</p>
                    <a href="{{ route('shop.index') }}" class="shx-btn shx-btn-primary">
                        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
                        Produkte ansehen
                    </a>
                    <ul class="shxc-empty-trust">
                        <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>
                            Sofortiger Zugang nach Kauf
                        </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>
                            Sichere Zahlung per Vorkasse
                        </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>
                            Lebenslange Updates inklusive
                        </li>
                    </ul>
                </div>
            </section>

        @else

            {{-- ===== CART LAYOUT ===== --}}
            <div class="container shxc-layout">

                {{-- ----- LEFT: Items ----- --}}
                <main class="shxc-items" aria-label="Warenkorb-Artikel">
                    <div class="shxc-items-head">
                        <h2 class="shxc-items-title">Warenkorb</h2>
                        <span class="shxc-items-count">{{ $summary['count'] }} {{ $summary['count'] === 1 ? 'Artikel' : 'Artikel' }}</span>
                    </div>

                    @foreach ($summary['items'] as $item)
                        <article class="shxc-item">
                            <a href="{{ route('shop.show', $item['product']) }}" class="shxc-item-thumb" aria-label="{{ $item['product']->name }}">
                                <img
                                    src="{{ $item['product']->image_url ?: asset('img/logo-mark.png') }}"
                                    alt="{{ $item['product']->name }}"
                                    loading="lazy"
                                    onerror="this.onerror=null;this.src='{{ asset('img/logo-mark.png') }}';">
                            </a>
                            <div class="shxc-item-body">
                                <div class="shxc-item-top">
                                    <div class="shxc-item-info">
                                        @if ($item['product']->category)
                                            <span class="shx-cat">{{ $item['product']->category }}</span>
                                        @endif
                                        <h2 class="shxc-item-name">
                                            <a href="{{ route('shop.show', $item['product']) }}">{{ $item['product']->name }}</a>
                                        </h2>
                                        @if ($item['product']->short_description)
                                            <p class="shxc-item-desc">{{ $item['product']->short_description }}</p>
                                        @endif
                                    </div>
                                    <div class="shxc-item-price-col">
                                        <span class="shx-price">{{ $item['line_total_formatted'] }}</span>
                                        @if ($item['quantity'] > 1)
                                            <span class="shxc-unit-price">{{ $item['product']->price_formatted }} / Stk.</span>
                                        @endif
                                    </div>
                                </div>

                                <div class="shxc-item-controls">
                                    <form method="POST" action="{{ route('shop.cart.update', $item['product']) }}" class="shxc-stepper-form">
                                        @csrf
                                        @method('PATCH')
                                        <div class="shxc-stepper" role="group" aria-label="Menge">
                                            <button type="button" class="shxc-stepper-btn" data-step="-1" aria-label="Menge verringern">&minus;</button>
                                            <input type="number" name="quantity" min="0" max="{{ $item['product']->stock_quantity }}" value="{{ $item['quantity'] }}" class="shxc-stepper-input" aria-label="Menge">
                                            <button type="button" class="shxc-stepper-btn" data-step="1" aria-label="Menge erhöhen">+</button>
                                        </div>
                                        <button type="submit" class="shx-btn shx-btn-ghost shx-btn-sm">Aktualisieren</button>
                                    </form>

                                    <form method="POST" action="{{ route('shop.cart.destroy', $item['product']) }}" class="shxc-remove-form">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="shxc-remove-btn" aria-label="Aus Warenkorb entfernen">
                                            <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="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></svg>
                                            Entfernen
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </main>

                {{-- ----- RIGHT: Order summary ----- --}}
                <aside class="shxc-summary" aria-label="Bestellübersicht">
                    <div class="shxc-summary-card">
                        <h2 class="shxc-summary-title">Bestellübersicht</h2>

                        <div class="shxc-summary-rows">
                            <div class="shxc-summary-row">
                                <span>Zwischensumme ({{ $summary['count'] }} Artikel)</span>
                                <strong>{{ $summary['subtotal_formatted'] }}</strong>
                            </div>
                            <div class="shxc-summary-row">
                                <span>Versand</span>
                                <strong class="{{ $summary['shipping_cents'] === 0 ? 'shxc-free' : '' }}">{{ $summary['shipping_formatted'] }}</strong>
                            </div>
                        </div>

                        <div class="shxc-summary-total">
                            <span class="shxc-total-label">Gesamtbetrag</span>
                            <strong class="shxc-total-amount">{{ $summary['total_formatted'] }}</strong>
                        </div>

                        @if (($shippingConfig['free_from_cents'] ?? 0) > 0 && ($summary['shipping_cents'] ?? 0) > 0)
                            <p class="shxc-shipping-hint">
                                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                                Kostenloser Versand ab {{ $freeFrom }} €
                            </p>
                        @endif

                        <div class="shxc-summary-actions">
                            <a href="{{ route('shop.checkout.create') }}" class="shx-btn shx-btn-primary shxc-checkout-btn">
                                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.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"/></svg>
                                Zur Kasse
                            </a>
                            <a href="{{ route('shop.index') }}" class="shx-btn shx-btn-ghost shxc-more-btn">
                                Weiter shoppen
                            </a>
                        </div>

                        <ul class="shxc-trust-list" aria-label="Sicherheitshinweise">
                            <li>
                                <svg viewBox="0 0 24 24" width="15" height="15" 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>
                                Sofortiger Zugang nach Zahlungseingang
                            </li>
                            <li>
                                <svg viewBox="0 0 24 24" width="15" height="15" 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>
                                Sichere Zahlung per Vorkasse
                            </li>
                            <li>
                                <svg viewBox="0 0 24 24" width="15" height="15" 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>
                                Lebenslange Updates für digitale Produkte
                            </li>
                        </ul>
                    </div>
                </aside>

            </div>

        @endif

    </div>

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

    <style>
    /* ===== Cart page — shxc- 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; }

    /* shared button + cat tokens (same as index) */
    .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-price{ font-weight:800;font-size:1.28rem;color:var(--ink);letter-spacing:-.015em;font-variant-numeric:tabular-nums; }
    .shx-cat{ font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted); }
    /* ---- Hero (Bereichs-Header-Muster — identisch zu shop/index) ---- */
    .shx-hero{
        position:relative;overflow:hidden;text-align:center;
        padding:clamp(96px,11vw,128px) 8% clamp(40px,5vw,56px);
        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); } }
    .shxc-back{
        display:inline-flex;align-items:center;gap:7px;
        color:var(--muted);font-size:.88rem;font-weight:600;transition:color .15s;
    }
    .shxc-back:hover{ color:var(--p-dark); }

    /* ---- Empty state ---- */
    .shxc-empty-wrap{ padding:clamp(60px,10vw,110px) 0; }
    .shxc-empty{ text-align:center;max-width:500px; }
    .shxc-empty-icon{ display:inline-flex;align-items:center;justify-content:center;width:92px;height:92px;border-radius:50%;background:var(--p-soft);color:var(--p);margin-bottom:22px;border:2px solid rgba(15,138,79,.14); }
    .shxc-empty-title{ margin:0 0 14px;font-size:clamp(1.9rem,4vw,2.5rem);font-weight:800;letter-spacing:-.025em;color:var(--ink); }
    .shxc-empty-copy{ margin:0 auto 28px;max-width:42ch;color:var(--muted);line-height:1.65;font-size:1.02rem; }
    .shxc-empty-trust{ list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;align-items:center; }
    .shxc-empty-trust li{ display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted);font-weight:600; }
    .shxc-empty-trust li svg{ color:var(--p);flex:none; }

    /* ---- Cart layout ---- */
    .shxc-layout{ display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(20px,3vw,36px);padding-block:clamp(28px,4vw,48px);align-items:start; }

    /* ---- Items header ---- */
    .shxc-items-head{ display:flex;align-items:baseline;gap:14px;margin-bottom:20px;padding-bottom:18px;border-bottom:2px solid var(--line); }
    .shxc-items-title{ margin:0;font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;letter-spacing:-.025em;color:var(--ink); }
    .shxc-items-count{ font-size:.9rem;font-weight:700;color:var(--muted);background:var(--p-soft);border-radius:999px;padding:4px 12px; }

    /* ---- Cart item ---- */
    .shxc-item{ display:flex;gap:clamp(14px,2vw,22px);padding:22px 0;border-bottom:1px solid var(--line); }
    .shxc-item:last-child{ border-bottom:0; }
    .shxc-item-thumb{ flex:none;width:clamp(80px,12vw,110px);aspect-ratio:1;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#eef6f1,#f7f1e3);display:flex;align-items:center;justify-content:center;padding:10px;border:1px solid var(--line);transition:transform .2s ease; }
    .shxc-item-thumb:hover{ transform:scale(1.03); }
    .shxc-item-thumb img{ width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply; }
    .shxc-item-body{ flex:1;min-width:0;display:flex;flex-direction:column;gap:14px; }
    .shxc-item-top{ display:flex;gap:12px;align-items:flex-start;justify-content:space-between; }
    .shxc-item-info{ flex:1;min-width:0;display:flex;flex-direction:column;gap:5px; }
    .shxc-item-name{ margin:0;font-size:1.13rem;font-weight:800;letter-spacing:-.01em;line-height:1.3; }
    .shxc-item-name a{ color:var(--ink);transition:color .15s; }
    .shxc-item-name a:hover{ color:var(--p-dark); }
    .shxc-item-desc{ margin:0;font-size:.88rem;color:var(--muted);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
    .shxc-item-price-col{ text-align:right;flex:none; }
    .shxc-unit-price{ display:block;font-size:.8rem;color:var(--muted);margin-top:4px;font-weight:600; }
    .shxc-item-controls{ display:flex;flex-wrap:wrap;align-items:center;gap:12px; }
    .shxc-stepper-form{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
    .shxc-stepper{ display:inline-flex;align-items:stretch;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff; }
    .shxc-stepper-btn{ width:38px;border:0;background:#f8fafc;color:var(--p-dark);font-size:1.2rem;font-weight:800;line-height:1;cursor:pointer;transition:background .15s;font-family:inherit;flex:none; }
    .shxc-stepper-btn:hover{ background:var(--p-soft); }
    .shxc-stepper-input{ width:52px;border:0;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);text-align:center;font:inherit;font-weight:700;padding:9px 4px;-moz-appearance:textfield;color:var(--ink);font-size:.97rem; }
    .shxc-stepper-input::-webkit-outer-spin-button,.shxc-stepper-input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; }
    .shxc-remove-form{ margin-left:auto; }
    .shxc-remove-btn{ display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;color:var(--muted);font-size:.86rem;font-weight:600;font-family:inherit;padding:8px 4px;border-radius:8px;transition:color .15s; }
    .shxc-remove-btn:hover{ color:#b91c1c; }

    /* ---- Summary card ---- */
    .shxc-summary{ position:sticky;top:90px; }
    .shxc-summary-card{ background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:clamp(22px,3vw,30px);box-shadow:0 20px 50px -24px rgba(15,23,42,.22);overflow:hidden;position:relative; }
    .shxc-summary-card::before{ content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--p),var(--g)); }
    .shxc-summary-title{ margin:0 0 22px;font-size:1.25rem;font-weight:800;color:var(--ink);letter-spacing:-.015em; }
    .shxc-summary-rows{ display:flex;flex-direction:column;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line); }
    .shxc-summary-row{ display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:.93rem;color:var(--muted); }
    .shxc-summary-row strong{ color:var(--ink);font-weight:700; }
    .shxc-free{ color:var(--p-dark) !important; }
    .shxc-summary-total{ display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:18px; }
    .shxc-total-label{ font-size:.95rem;font-weight:700;color:var(--ink); }
    .shxc-total-amount{ font-size:1.65rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums; }
    .shxc-shipping-hint{ display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--p-dark);font-weight:600;margin:12px 0 0; }
    .shxc-summary-actions{ display:flex;flex-direction:column;gap:10px;margin-top:22px; }
    .shxc-checkout-btn{ width:100%;font-size:1.05rem;padding:15px 24px;min-height:54px; }
    .shxc-more-btn{ width:100%; }
    .shxc-trust-list{ list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--line);padding-top:20px; }
    .shxc-trust-list li{ display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);font-weight:600; }
    .shxc-trust-list li svg{ color:var(--p);flex:none; }

    /* ---- Responsive ---- */
    @media (max-width:900px){
        .shxc-layout{ grid-template-columns:1fr; }
        .shxc-summary{ position:static; }
    }
    @media (max-width:560px){
        .shxc-item{ flex-wrap:wrap;gap:14px; }
        .shxc-item-thumb{ width:72px; }
        .shxc-item-body{ width:100%; }
        .shxc-item-top{ flex-direction:column;gap:6px; }
        .shxc-item-price-col{ text-align:left; }
    }
    @media (prefers-reduced-motion:reduce){
        .shx-btn,.shxc-item-thumb,.shxc-back{ transition:none !important; }
        .shx-dot{ animation:none !important; }
    }
    </style>
@endsection