function Cart() {
  return (
    <React.Fragment>
      <div style={{padding:"14px 14px 8px", display:"flex", alignItems:"center", justifyContent:"space-between"}}>
        <h1 style={{fontFamily:"var(--font-display)", fontSize:20, fontWeight:500, margin:0}}>购物车 (3)</h1>
        <span style={{fontFamily:"var(--font-sans)", fontSize:13, color:"var(--thaihao-primary)"}}>管理</span>
      </div>

      <div className="cart-item">
        <div className="pic bg-rice">米</div>
        <div className="info">
          <div className="name">Khao Hom 茉莉香米 5kg · 顶级</div>
          <div className="variant">2026 年新米 · 直播限定</div>
          <div className="price">¥89<span style={{fontSize:11, color:"var(--on-surface-variant)", marginLeft:4, textDecoration:"line-through"}}>¥128</span></div>
        </div>
        <div className="qty">
          <button>−</button><span>2</span><button>+</button>
        </div>
      </div>
      <div className="cart-item">
        <div className="pic bg-rose">釉</div>
        <div className="info">
          <div className="name">Siam 唇釉 · 玫瑰</div>
          <div className="variant">04 号 · 玫瑰红</div>
          <div className="price">¥168</div>
        </div>
        <div className="qty">
          <button>−</button><span>1</span><button>+</button>
        </div>
      </div>
      <div className="cart-item">
        <div className="pic bg-coffee">咖</div>
        <div className="info">
          <div className="name">Riang Mai 清迈手冲咖啡豆 1kg</div>
          <div className="variant">中烘焙 · 圆豆</div>
          <div className="price">¥128</div>
        </div>
        <div className="qty">
          <button>−</button><span>1</span><button>+</button>
        </div>
      </div>

      <div className="cart-summary">
        <div className="line"><span className="k">商品总额</span><span className="v">¥474.00 CNY</span></div>
        <div className="line"><span className="k">直播折扣</span><span className="v" style={{color:"var(--color-text-on-success)"}}>−¥39.00</span></div>
        <div className="line"><span className="k">运费 · 泰国 → 中国</span><span className="v">¥18.00</span></div>
        <div className="line total"><span className="k">合计</span><span className="v">¥453.00 CNY</span></div>
      </div>

      <div style={{padding:"12px 14px"}}>
        <div style={{display:"flex", alignItems:"center", gap:8, padding:"10px 12px", background:"var(--color-background-info)", borderRadius:8, fontFamily:"var(--font-sans)", fontSize:12, color:"var(--color-text-on-info)"}}>
          <i className="ti ti-truck"></i>
          <span>预计 3-5 天送达 · 跨境直邮 · 已扫描泰国海关</span>
        </div>
      </div>

      <div className="cart-foot" style={{position:"sticky", bottom:0}}>
        <div className="total">
          <div className="k">总计</div>
          <div className="v">¥453<span style={{fontSize:11, color:"var(--on-surface-variant)", marginLeft:4}}> CNY</span></div>
        </div>
        <button>结算 (3)</button>
      </div>
    </React.Fragment>
  );
}

window.Cart = Cart;