0
#fafaf9
1<label class="group relative flex w-52 cursor-pointer select-none items-center gap-3 rounded-2xl bg-white p-3 shadow-[0_12px_30px_-14px_rgb(0_0_0/.3)] ring-1 ring-stone-200 transition duration-500 has-[:checked]:ring-emerald-300 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-emerald-500">2 <input type="checkbox" class="peer sr-only" />3 <span class="grid size-12 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-orange-300 to-rose-400 text-white">4 <svg class="size-6 -rotate-12" viewBox="0 0 24 24" fill="currentColor"><path d="M2 16.5c0-1 .7-1.6 1.6-1.4l4.9 1c1 .2 1.9-.3 2.3-1.2L12.5 11c.3-.7 1.2-.9 1.7-.3 1.3 1.6 3.3 2.6 5.5 2.8 1.3.1 2.3 1.2 2.3 2.5V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z"/></svg>5 </span>6 <span class="min-w-0 flex-1">7 <span class="block text-sm font-semibold text-stone-800">Tênis leve</span>8 <span class="relative block h-4 overflow-hidden text-xs">9 <span class="block text-stone-500 transition duration-300 group-has-[:checked]:-translate-y-4 group-has-[:checked]:opacity-0">R$ 289,90</span>10 <span class="absolute left-0 top-0 block translate-y-4 whitespace-nowrap font-semibold text-emerald-600 opacity-0 transition duration-300 group-has-[:checked]:translate-y-0 group-has-[:checked]:opacity-100 group-has-[:checked]:delay-500">No carrinho</span>11 </span>12 </span>13 <span class="relative grid size-9 shrink-0 place-items-center rounded-full bg-stone-900 text-white transition duration-300 group-active:scale-90 group-has-[:checked]:bg-emerald-500">14 <svg class="size-4 transition duration-300 group-has-[:checked]:rotate-90 group-has-[:checked]:scale-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>15 <svg class="absolute inset-0 m-auto size-4 scale-0 transition duration-500 ease-[cubic-bezier(.34,1.8,.64,1)] group-has-[:checked]:scale-100 group-has-[:checked]:delay-200" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>16 <span class="absolute inset-0 m-auto size-2.5 rounded-full bg-emerald-500 opacity-0 group-has-[:checked]:animate-[voa_.6s_cubic-bezier(.5,0,.5,1)]"></span>17 </span>18 <span class="absolute -right-2 -top-3 grid size-8 place-items-center rounded-full bg-white text-stone-700 shadow-md ring-1 ring-stone-200 group-has-[:checked]:animate-[sacode_.5s_ease-in-out_.5s] motion-reduce:animate-none">19 <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="20" r="1.3"/><circle cx="18" cy="20" r="1.3"/><path d="M2 3h3l2.6 12.2a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.5L21.5 8H6"/></svg>20 <span class="absolute -right-1 -top-1 grid size-4 scale-0 place-items-center rounded-full bg-emerald-500 text-[9px] font-bold text-white transition duration-300 ease-[cubic-bezier(.34,1.9,.64,1)] group-has-[:checked]:scale-100 group-has-[:checked]:delay-500">1</span>21 </span>22</label>