EC一覧で使う商品カード。正方形サムネイル・星評価・税込価格・カートボタンの定番構成で、評価はaria-labelで数値も伝えます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
星評価は「★★★★★」の文字を塗り分ける最も単純な方式です。見た目の星は aria-hidden にし、評価の実体は親の aria-label（「5点満点中4点」）で伝えます。星の文字列だけだと支援技術には「星星星…」と読まれてしまうためです。サムネイルは aspect-ratio: 1 の正方形で、一覧に並べたときの高さが揃います。
0.5点刻みの星が必要な場合は、background: linear-gradient()で塗り幅を制御する方式に切り替えます。
EC用の商品カードを作ってください。正方形サムネイル（aspect-ratio: 1）・商品名・星評価（見た目はaria-hidden、実体はaria-labelで「5点満点中4点」）・税込価格・カートボタンの構成にしてください。