function CartDrawer1({ open, onClose, items, onQty, onRemove, total }) {
  const totalQty = items.reduce((a, i) => a + i.qty, 0);
  return (
    <>
      <div className={"cart-scrim" + (open ? " open" : "")} onClick={onClose} />
      <aside className={"cart-drawer" + (open ? " open" : "")}>
        <div className="cd-head">
          <div className="cd-title">
            Carrito <span>{totalQty}</span>
          </div>
          <button className="cd-close" onClick={onClose} aria-label="Cerrar">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M18 6L6 18M6 6l12 12"/></svg>
          </button>
        </div>
        <div className="cd-body">
          {items.length === 0 && (
            <div className="cd-empty">Tu carrito está vacío.<br/>Agrega productos para continuar.</div>
          )}
          {items.map((item, idx) => (
            <div key={item.id + "-" + idx} className="cd-item">
              <div className="cd-item-img">
                <svg width="28" height="28" viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round">
                  <ellipse cx="32" cy="38" rx="16" ry="22"/>
                  <path d="M32 16C28 8 28 2 32-2c4 4 4 10 0 18"/>
                  <path d="M32 38C16 30 6 16 10 4"/>
                  <path d="M32 38C48 30 58 16 54 4"/>
                </svg>
              </div>
              <div>
                <div className="cd-item-name">{item.name}</div>
                <div className="cd-item-cat">{item.brand}</div>
                <div className="cd-qty">
                  <button onClick={() => onQty(item.id, -1)}>−</button>
                  <span>{item.qty}</span>
                  <button onClick={() => onQty(item.id, +1)}>+</button>
                </div>
              </div>
              <div className="cd-item-right">
                <div className="cd-item-price">{fmt1(item.price * item.qty)}</div>
                <button className="cd-remove" onClick={() => onRemove(item.id)}>Quitar</button>
              </div>
            </div>
          ))}
        </div>
        {items.length > 0 && (
          <div className="cd-foot">
            <div className="cd-total">
              <span>Subtotal</span>
              <strong>{fmt1(total)}</strong>
            </div>
            <a href="#" className="btn btn-primary cd-cta">
              Ir al checkout
              <span className="arr">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
              </span>
            </a>
          </div>
        )}
      </aside>
    </>
  );
}

Object.assign(window, { CartDrawer1 });