Product Variant Selector & Cart Add Widget

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="p-custom-card" onsubmit="return false;"><div class="p-header"><div class="p-title">Minimalist Leather Tote</div><div class="p-price">$185.00</div></div><div class="p-section"><label>COLOR</label><div class="color-opts"><label class="c-opt"><input type="radio" name="col" checked><span class="c-dot" style="background:#2b2b2b;"></span></label><label class="c-opt"><input type="radio" name="col"><span class="c-dot" style="background:#c4a482;"></span></label><label class="c-opt"><input type="radio" name="col"><span class="c-dot" style="background:#8b5e3c;"></span></label></div></div><div class="p-section"><label>SIZE</label><div class="size-opts"><label class="s-opt"><input type="radio" name="sz"><span>S</span></label><label class="s-opt"><input type="radio" name="sz" checked><span>M</span></label><label class="s-opt"><input type="radio" name="sz"><span>L</span></label></div></div><div class="p-row"><div class="qty-picker"><button type="button">-</button><input type="number" value="1" min="1"><button type="button">+</button></div><button type="submit" class="add-cart-btn">Add to Cart</button></div></form>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.p-custom-card { width: 220px; background: #ffffff; border-radius: 16px; padding: 18px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.p-header { margin-bottom: 12px; }
.p-title { font-size: 11px; font-weight: 800; color: #0f172a; }
.p-price { font-size: 13px; font-weight: 900; color: #0f172a; margin-top: 2px; }
.p-section { margin-bottom: 10px; }
.p-section label { display: block; font-size: 6px; font-weight: 800; color: #64748b; margin-bottom: 4px; letter-spacing: 0.5px; }
.color-opts { display: flex; gap: 6px; }
.c-opt input { display: none; }
.c-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; cursor: pointer; border: 2px solid transparent; transition: 0.2s; }
.c-opt input:checked + .c-dot { border-color: #000; transform: scale(1.1); }
.size-opts { display: flex; gap: 4px; }
.s-opt input { display: none; }
.s-opt span { display: inline-block; width: 24px; height: 22px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 7px; font-weight: 800; text-align: center; line-height: 20px; color: #334155; cursor: pointer; }
.s-opt input:checked + span { background: #0f172a; color: #fff; border-color: #0f172a; }
.p-row { display: flex; gap: 6px; margin-top: 12px; }
.qty-picker { display: flex; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
.qty-picker button { border: none; background: #f8fafc; width: 18px; font-size: 10px; cursor: pointer; font-weight: 700; color: #334155; }
.qty-picker input { width: 22px; border: none; text-align: center; font-size: 8px; font-weight: 700; outline: none; -moz-appearance: textfield; }
.qty-picker input::-webkit-outer-spin-button, .qty-picker input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.add-cart-btn { flex: 1; background: #0f172a; color: #fff; border: none; border-radius: 6px; padding: 7px; font-size: 8px; font-weight: 800; cursor: pointer; }