{{-- Background ellipse rings per product card (aligned with tsic-ellipse-decoration: tilted ovals, stroke + soft fill) --}}
@php
    $i = max(0, min(2, (int) ($paletteIndex ?? 0)));
    /** Token pairs per category gradient so strokes harmonize with each card mood */
    $ellipsePairs = [
        [
            ['cx' => 308, 'cy' => 92, 'rx' => 128, 'ry' => 64, 'token' => 'primary', 'fill' => 0.1, 'stroke' => 0.26],
            ['cx' => 88, 'cy' => 418, 'rx' => 108, 'ry' => 54, 'token' => 'secondary', 'fill' => 0.09, 'stroke' => 0.24],
        ],
        [
            ['cx' => 312, 'cy' => 88, 'rx' => 124, 'ry' => 62, 'token' => 'secondary', 'fill' => 0.11, 'stroke' => 0.28],
            ['cx' => 92, 'cy' => 422, 'rx' => 102, 'ry' => 51, 'token' => 'accent', 'fill' => 0.09, 'stroke' => 0.24],
        ],
        [
            ['cx' => 305, 'cy' => 98, 'rx' => 118, 'ry' => 59, 'token' => 'accent', 'fill' => 0.1, 'stroke' => 0.26],
            ['cx' => 95, 'cy' => 410, 'rx' => 112, 'ry' => 56, 'token' => 'secondary', 'fill' => 0.09, 'stroke' => 0.25],
        ],
    ];
    $ellipses = $ellipsePairs[$i];
    $tiltDeg = -45;
@endphp
<div class="pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]" aria-hidden="true">
    <svg
        class="absolute inset-0 h-full w-full"
        viewBox="0 0 400 520"
        preserveAspectRatio="xMidYMid slice"
        xmlns="http://www.w3.org/2000/svg"
        shape-rendering="geometricPrecision"
    >
        <g stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round">
            @foreach ($ellipses as $e)
                <ellipse
                    cx="{{ $e['cx'] }}"
                    cy="{{ $e['cy'] }}"
                    rx="{{ $e['rx'] }}"
                    ry="{{ $e['ry'] }}"
                    transform="rotate({{ $tiltDeg }} {{ $e['cx'] }} {{ $e['cy'] }})"
                    fill="var(--{{ $e['token'] }})"
                    fill-opacity="{{ $e['fill'] }}"
                    stroke="var(--{{ $e['token'] }})"
                    stroke-opacity="{{ $e['stroke'] }}"
                    vector-effect="non-scaling-stroke"
                />
            @endforeach
        </g>
    </svg>
</div>