function CartDrawer({ cart, onClose, onRemove, onUpdateQty, total, onCheckout }) {
  const drawerStyle = {
    position: 'fixed', top: 0, right: 0, bottom: 0, width: 420, maxWidth: '100vw',
    background: '#FAF6EE', zIndex: 2000, display: 'flex', flexDirection: 'column',
    boxShadow: '-8px 0 40px rgba(0,0,0,0.2)',
    fontFamily: "'DM Sans', sans-serif",
    borderLeft: '3px solid #111',
  };

  return (
    <>
      <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.4)', zIndex:1999 }}/>
      <div style={drawerStyle}>
        {/* Header */}
        <div style={{ background:'#F5C400', borderBottom:'3px solid #111', padding:'20px 28px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <span style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:24, fontWeight:900, color:'#111', letterSpacing:1 }}>YOUR CART</span>
          <button onClick={onClose} style={{ background:'#111', border:'none', color:'#F5C400', width:36, height:36, borderRadius:4, cursor:'pointer', fontSize:20, display:'flex', alignItems:'center', justifyContent:'center' }}>✕</button>
        </div>

        {/* Items */}
        <div style={{ flex:1, overflowY:'auto', padding:'24px 28px' }}>
          {cart.length === 0 ? (
            <div style={{ textAlign:'center', paddingTop:80 }}>
              <div style={{ fontSize:64, marginBottom:16 }}>🫙</div>
              <p style={{ fontWeight:700, fontSize:18, color:'#111' }}>Your cart is empty</p>
              <p style={{ color:'#666', fontSize:14 }}>Add some pure tallow to get started.</p>
            </div>
          ) : cart.map(item => (
            <div key={item.key || item.id} style={{ display:'flex', gap:16, marginBottom:24, paddingBottom:24, borderBottom:'2px solid #eee', alignItems:'center' }}>
              <div style={{ width:72, height:72, background:'#F5C400', borderRadius:8, border:'2px solid #111', flexShrink:0, overflow:'hidden' }}>
                <img src={item.image} alt={item.name} style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}/>
              </div>
              <div style={{ flex:1 }}>
                <p style={{ fontWeight:800, fontSize:15, color:'#111', margin:'0 0 2px' }}>{item.name}</p>
                <p style={{ fontSize:13, color:'#666', margin:'0 0 8px' }}>{item.subtitle}</p>
                <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                  <button onClick={() => onUpdateQty(item.key || item.id, item.qty - 1)} style={qBtn}>−</button>
                  <span style={{ fontWeight:700, fontSize:15, minWidth:20, textAlign:'center' }}>{item.qty}</span>
                  <button onClick={() => onUpdateQty(item.key || item.id, item.qty + 1)} style={qBtn}>+</button>
                </div>
              </div>
              <div style={{ textAlign:'right' }}>
                <p style={{ fontWeight:800, fontSize:17, color:'#111', margin:'0 0 8px' }}>${(item.price * item.qty).toFixed(2)}</p>
                <button onClick={() => onRemove(item.key || item.id)} style={{ background:'none', border:'none', color:'#888', cursor:'pointer', fontSize:12, textDecoration:'underline' }}>Remove</button>
              </div>
            </div>
          ))}
        </div>

        {/* Footer */}
        {cart.length > 0 && (
          <div style={{ borderTop:'3px solid #111', padding:'24px 28px', background:'#fff' }}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:8 }}>
              <span style={{ color:'#666', fontSize:14 }}>Subtotal</span>
              <span style={{ fontWeight:800, fontSize:20 }}>${total.toFixed(2)}</span>
            </div>
            <p style={{ color:'#888', fontSize:12, marginBottom:16 }}>Shipping calculated at checkout · Free over $50</p>
            <button onClick={onCheckout} style={{
              width:'100%', background:'#111', color:'#F5C400', border:'3px solid #111',
              borderRadius:6, padding:'16px', fontFamily:"'Black Han Sans', Impact, sans-serif",
              fontSize:20, fontWeight:900, cursor:'pointer', letterSpacing:1,
              transition:'all 0.15s',
            }}
              onMouseEnter={e => { e.target.style.background='#F5C400'; e.target.style.color='#111'; }}
              onMouseLeave={e => { e.target.style.background='#111'; e.target.style.color='#F5C400'; }}
            >CHECKOUT →</button>
          </div>
        )}
      </div>
    </>
  );
}

const qBtn = {
  width:28, height:28, background:'#F5C400', border:'2px solid #111',
  borderRadius:4, cursor:'pointer', fontWeight:900, fontSize:16,
  display:'flex', alignItems:'center', justifyContent:'center',
};

Object.assign(window, { CartDrawer });