スマホ用ECカート画面モック

<div class="d11-06-10-frame">
          <div class="d11-06-10-title">カート(2)</div>
          <div class="d11-06-10-row">
            <span class="d11-06-10-thumb"></span>
            <div class="d11-06-10-txt"><p class="d11-06-10-t">サンプル商品A</p><p class="d11-06-10-p">¥3,200</p></div>
            <span class="d11-06-10-qty">1</span>
          </div>
          <div class="d11-06-10-row">
            <span class="d11-06-10-thumb"></span>
            <div class="d11-06-10-txt"><p class="d11-06-10-t">サンプル商品B</p><p class="d11-06-10-p">¥1,800</p></div>
            <span class="d11-06-10-qty">2</span>
          </div>
          <div class="d11-06-10-foot"><span>合計</span><b>¥6,800</b></div>
          <span class="d11-06-10-btn">レジに進む</span>
        </div>

.d11-06-10-frame{ width:180px; height:240px; border:2px solid #26292f; border-radius:20px; overflow:hidden; background:#fff; padding:12px; display:flex; flex-direction:column; gap:6px; }
        .d11-06-10-title{ font-size:12px; font-weight:700; color:#1f2328; margin-bottom:2px; }
        .d11-06-10-row{ display:flex; align-items:center; gap:7px; padding-top:6px; border-top:1px solid #f0f2f5; }
        .d11-06-10-thumb{ width:24px; height:24px; border-radius:6px; background:#dbe4f5; flex:0 0 auto; }
        .d11-06-10-txt{ flex:1; min-width:0; }
        .d11-06-10-t{ margin:0; font-size:9.5px; color:#1f2328; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .d11-06-10-p{ margin:1px 0 0; font-size:9px; font-weight:700; color:#2f6fed; }
        .d11-06-10-qty{ font-size:9px; color:#8792a2; background:#f1f4f8; border-radius:5px; padding:2px 6px; }
        .d11-06-10-foot{ display:flex; justify-content:space-between; margin-top:auto; font-size:11px; color:#1f2328; }
        .d11-06-10-foot b{ font-size:12px; }
        .d11-06-10-btn{ text-align:center; background:#2f6fed; color:#fff; font-size:11px; font-weight:700; border-radius:8px; padding:8px; }